我一直在阅读有关流畅布局的文章,并且发现了一篇非常好的文章,可以帮助我实现我现在所需要的。它是关于使用百分比而不是max-width
的流体图像。
更好的流体图像解决方案: http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design
例如,假设您在1200px宽的文档中拥有自然大小为500px×300px的图像。低于1200px,文件将是流动的。计算图像占据文档宽度的百分比很容易:(500/1200)×100 = 41.66%
这听起来非常适合我需要的东西,但有一件事我不明白:我怎么告诉浏览器,当宽度低于1200px时,图像应该占据文档的41.66%?如果我只设置<img src="something.jpg" style="width: 41.66%;>
,它将使图像总是占用41,66%,我需要这个只发生在1200px宽以下。
任何帮助都将受到高度赞赏!
答案 0 :(得分:0)
您可以通过媒体查询来执行此操作。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
img {
width: 500px;
}
@media ( max-width 1200px ) {
img {
width: 41.66%;
}
.img2 {
width: 42%;
}
}