4

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

2 回答 2

11

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

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

您需要直接定位嵌套的img后代元素并为其指定宽度100%：

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

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

.blog-img img {
  height: auto;
  min-width: 100%;
}
  • 使用会将元素width: 100%拉伸到.img100%
  • 使用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" />

由于您正在针对移动浏览器优化您的网站，因此请务必设置视口元标记：

<meta name="viewport" content="width=device-width, initial-scale=1">
于 2013-09-02T02:55:35.007 回答
0

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

如果您决定使用 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 中包含视口，它使页面更加稳定。

于 2013-09-02T03:17:33.593 回答