响应式IMG维持维度

Question

我有一个响应式网站，我在相应的CSS3媒体查询的视口中调整所有图像的大小。我想知道是否有更简单的方式来表明我希望我的所有图片都调整大小以保持其原始声明的尺寸，而不是使用max-height，width等相应地手动调整每个尺寸。任何建议？< / p>

EG下方。

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {

#logoimg { max-height: 100px; max-width: 100px; }

}

Answer 1

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

Answer 2

使用background-size：contains;或背景大小：封面;酌情。

Answer 3

这就是通常所说的fluid images所需要的：

img {
  max-width: 100%;
  height: auto;
}

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

这样您就可以在img的容器元素上声明宽度或最大宽度，而不必担心尺寸/比例。