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

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" />

由于您要为移动浏览器优化网站,请务必设置视口元标记:

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