Question

当在移动设备上调整浏览器大小/查看浏览器时，有什么方法可以保持图像/单元大小相同吗？

在个人电脑或平板电脑上观看时，它绝对正常，但是5个图像保持在同一行中，手机看起来很糟糕。我希望移动版本每行1个图像/单元格。

这是HTML

<div class="row">
<div class="-1u 2u"> <span class="image fit"><img src="http://thewebster.co/base/images/maskc.png" alt=""></span>

    <p class="align-center">Some Text</p>
</div>
<div class="2u 2u"> <span class="image fit"><img src="http://thewebster.co/base/images/handsc.png" alt=""></span>

    <p class="align-center">Some Text</p>
</div>
<div class="2u 2u"> <span class="image fit"><img src="http://thewebster.co/base/images/safetyc.png" alt=""></span>

    <p class="align-center">Some Text</p>
</div>
<div class="2u 2u"> <span class="image fit"><img src="http://thewebster.co/base/images/gunc.png" alt=""></span>

    <p class="align-center">Some Text</p>
</div>
<div class="2u 2u"> <span class="image fit"><img src="http://thewebster.co/base/images/freedomc.png" alt=""></span>

    <p class="align-center">Some Text</p>
</div>

这里是CSS

.row>* {
padding: 0px 0 0 2em;
}
.\-1u {
margin-left: 8.3333333333%;
}
.\32 u, .\32 u\24 {
width: 16.6666666667%;
clear: none;
margin-left: 0;
}
.row>* {
float: left;
}
.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}
.image {
border-radius: 4px;
border: 0;
display: inline-block;
position: relative;
}
.image.fit img {
width: 100%;
}
image img {
border-radius: 4px;
display: block;
}
.align-center {
text-align: center;
}

JSFiddle

Answer 1

使用media query检测设备的最大宽度，并删除行的浮动属性（float: none）。这将在每个元素上应用自然display: block并中断。请注意，如果视口的宽度小于480px，则下面的媒体查询将仅覆盖浮动。

@media all and (max-width: 480px) {

    .row > * {
        float: none;
    }

}

https://jsfiddle.net/k53mp946/4/

Answer 2

除了MVP的答案之外，如果你说你在移动设备上连续看到5张图片，我怀疑你可能忘记将以下内容包含在脑中：

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

或者，如果您不希望用户能够在移动设备上放大/缩小：

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

我需要IMG FIT来不调整图像大小

2 个答案: