我目前正在为一家公司开发移动登陆页面.这是一个非常基本的布局,但在标题下面有一个产品的图像,它总是100%宽度(设计显示它总是从边缘到边缘).根据屏幕的宽度,图像的高度显然会相应调整.我最初使用img(CSS宽度为100%)做了这个并且效果很好但是我意识到我想使用媒体查询来根据不同的分辨率提供不同的图像 - 比方说小,中等例如,同一图像的大版本.我知道你不能用CSS改变img src所以我想我应该使用CSS背景作为图像而不是HTML中的img标签.
我似乎无法正常工作,因为带背景图像的div需要宽度和高度来显示背景.我显然可以使用'width: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标签.一般的想法是,着陆页模板将使用不同的产品图像多次,因此我需要确保以最佳方式开发.
我很抱歉这是一个有点啰嗦,但我从这个项目来回到下一个,所以我想完成这个小事.在此先感谢您的时间,非常感谢.问候