让图像在移动平台上适合 100% 宽度

Question

所以我目前正在我的网站上实现移动版本，一切都很好，除了我希望能够做到这一点，以便无论用户将其水平还是垂直调整，图像都将填充屏幕的 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%;

Answer 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 name="viewport" content="width=device-width, initial-scale=1">

Answer 2

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

如果您决定使用 DIV，宽度：100%；，高度：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 中包含视口，它使页面更加稳定。

Answer 3

 <img src="/static/.." class="fit">

.fit {
  height: auto;
  max-width: 100%;
}

这会在大屏幕上保持图像尺寸，在小屏幕上缩小图像尺寸。