Question

所以我目前正在为我的网站实现移动版本，一切都很好，除了我想能够制作它所以无论用户是水平还是垂直地调整它，图像都将填满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

在任何非基于移动设备的平台上，该图像与正常情况完全相同，但不适用于移动设备。

它没有按预期工作，因为您给父元素.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">

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中包含视口，这样可以使页面更加稳定。

在移动平台上使图像适合100％宽度

2 个答案: