8
100％宽度的背景图片，高度为“自动”
我目前正在为一家公司制作移动目标网页。这是一个非常基本的布局，但是在标题下方有一张产品图片，该图片始终为100％的宽度（设计表明，该图片始终从一条边到另一条边）。根据屏幕的宽度，图像的高度显然会相应地进行调整。我最初是使用img（CSS宽度为100％）完成此操作的，效果很好，但我意识到我想使用媒体查询根据不同的分辨率提供不同的图像-假设尺寸较小，中等，例如，同一张图片的大版本。我知道您无法使用CSS更改img src，因此我认为应该为图像使用CSS背景，而不是HTML中的img标签。 我似乎无法正常工作，因为带有背景图片的div既需要宽度也需要高度来显示背景。我显然可以使用“宽度：100％”，但是高度该怎么用？我可以设置一个随机的固定高度，例如150px，然后可以看到图像的顶部150px，但这不是解决方案，因为没有固定高度。我玩过一次游戏，发现一旦有一个高度（用150px测试），我可以使用'background-size：100％'将图像正确地放入div中。我可以将较新的CSS3用于该项目，因为它仅针对移动设备。 我在下面添加了一个粗略的示例。请原谅内联样式，但我想举一个基本的例子来尝试使我的问题更清楚一些。 <div id="image-container"> <div id="image" style="background: url(image.jpg) no-repeat; width: 100%; height: 150px; background-size: 100%;"></div> </div> 是否可能需要根据整个页面给容器div设置一个百分比高度，还是我认为这是完全错误的？ 另外，您认为CSS背景是执行此操作的最佳方法吗？也许有一种技术可以根据设备/屏幕宽度来提供不同的img标签。通常的想法是，目标网页模板将与不同的产品图片一起使用多次，因此我需要确保以最佳方式开发这种模板。 我很抱歉，这有点冗长，但是我从这个项目来回到下一个项目，所以我想把这件事做完。在此先感谢您的宝贵时间，不胜感激。问候