css - 使用百分比的流体图像 : how do I make the correct approach?

Question

我一直在阅读有关流体布局的内容，并发现了一篇非常好的文章，它可以帮助我实现我现在需要的东西。它是关于使用百分比而不是 max-width 的流体图像.

更好的流体图像解决方案: http://demosthenes.info/blog/586/CSS-Fluid-Image-Techniques-for-Responsive-Site-Design

For example, let’s say you had an image that had a natural size of 500px × 300px in a 1200px wide document. Below 1200px, the document will be fluid. The calculation of how much width the image takes up as a percentage of the document is easy: (500 / 1200 ) × 100 = 41.66%

这听起来很适合我的需要，但有一件事我不明白:我如何告诉浏览器只有当宽度低于 1200 像素时图像才应占文档的 41.66%？如果我简单地设置 <img src="something.jpg" style="width: 41.66%;>它将使图像始终占据 41.66%，我需要它只在 1200 像素宽以下发生。

非常感谢任何帮助!

Answer 1

您需要媒体查询来执行此操作。

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%;
    }
}