在移动平台上使图像适合 100% 宽度答案

【问题标题】：Have image fit 100% width on mobile platforms在移动平台上使图像适合 100% 宽度
【发布时间】：2013-09-02 02:39:13
【问题描述】：

所以我目前正在为我的网站实施移动版本，一切都很好，除了我希望能够做到这一点，因此无论用户水平还是垂直调整图像，图像都将填充 100% 的屏幕宽度。该图像在任何非基于移动平台的正常情况下都适合 100%，但不适用于移动设备。有什么建议吗？

我目前正在使用

.blog{
    padding:10px;
    border-bottom:2px solid #eeeeee;
    padding:10px;
    background:#ececec;
}
.blog-img{
    text-align:left;
    width:100%;
    margin:0 auto;
    padding:10px 0 5px 0;
}

我也试过了：

min-width:100%;

【问题讨论】：

您是否使用过任何框架，例如 Bootstrap v3.0.0？
没有为此使用框架。

标签： html jquery-mobile mobile css

【解决方案1】：

该图像在任何非基于移动平台上的正常情况下都 100% 适合，但在移动设备上不适合。

它没有按预期工作，因为您为父元素 .blog-img 提供了 100% 的宽度。

你需要直接定位嵌套的img后代元素，并给它一个宽度100%：

.blog-img img {
  height: auto;
  width: 100%;
}

根据您要达到的目标，在某些情况下将min-width 设置为100% 可能会更好。

.blog-img img {
  height: auto;
  min-width: 100%;
}

使用width: 100% 会将img 元素拉伸到100% 的宽度。
使用max-width: 100% 会将img 元素的宽度增加到img 资源的最大总宽度。换句话说，这将防止img 元素被拉伸得比实际更大。

这是一个突出差异的最小示例：

<p>Using <code>max-width: 100%</code></p>
<img style="max-width: 100%;" src="http://placehold.it/50" />


<p>Using <code>width: 100%</code></p>
<img style="width: 100%;" src="http://placehold.it/50" />

由于您正在针对移动浏览器优化您的网站，请务必设置viewport meta tag：

<meta name="viewport" content="width=device-width, initial-scale=1">

【讨论】：

我可以上传css/html到JSfiddle
完美运行。非常感谢您的帮助，接受您的回答。

【解决方案2】：

这样怎么样，添加你想要的图像，作为DIV或文档的BODY的背景。

如果您决定使用 DIV，width: 100%;, height: 100%; 您还可以包含 z-index，如果您想超越或落后于某些内容。

{
    background-image: url(http://arianapierce.com/wp-content/uploads/2010/11/simple-lights-twitter-background.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

我还建议您在 HTML 中包含视口，它使页面更加稳定。

【讨论】：