响应式IMG保持尺寸

Question

我有一个响应式网站，在该网站上我正在调整相应CSS3媒体查询的视口中所有图像的大小。我想知道是否有一种更简单的方法来声明我要所有图像调整大小以保持其原始规定的尺寸，而不是使用max-height，width等手动相应地调整每个尺寸。有什么建议吗？

EG在下面。 通用标签

Answer 1

我认为声明img {max-width：100％}应该可以解决问题。图片将缩小并保持其尺寸。

Answer 2

使用背景尺寸：包含；或背景尺寸：封面；

Answer 3

这就是通常称为流体图像所需的内容： 通用标签

第一个声明确保所有图像都不会超出其包含元素的宽度。高度的自动声明可确保所有图像在缩小时都保持其比例，即使它们在img元素中具有大小属性也是如此。

通过这种方式，您可以只在img的容器元素上声明宽度或最大宽度，而不必担心尺寸/比例。

Answer 4

使用图片元素 http://caniuse.com/picture

手册 http://www.html5rocks.com/en/tutorials/响应式/图片元素/ 通用标签