响应式 IMG 保持维度答案

【问题标题】：Responsive IMGs maintain dimensions响应式 IMG 保持维度
【发布时间】：2012-03-09 02:24:48
【问题描述】：

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

EG 下面。

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

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

}

【问题讨论】：

也希望保留 CSS /CSS3，非常感谢！

标签： css media-queries responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用背景尺寸：包含；或背景尺寸：封面；视情况而定。

【讨论】：

【解决方案3】：

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

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

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

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

【讨论】：

【解决方案4】：

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

手动http://www.html5rocks.com/en/tutorials/responsive/picture-element/

<picture>
  <source 
    media="(min-width: 650px)"
    srcset="images/kitten-stretching.png">
  <source 
    media="(min-width: 465px)"
    srcset="images/kitten-sitting.png">
  <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten">
</picture>

【讨论】：