Question

我在优化移动/小视口观看的简单网站时遇到了问题。我有5个图像，紧挨着显示，并设置宽度为20％，没有边距，填充或其他任何东西。但是，当视口缩小到应缩放图像的点时，最后一个总是换行到新行。我创建了一个简单的测试，并在IE和Chrome中看到了这种行为：

<html> 
<head> 
<title>Image test</title>
</head>
<body>
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
    <img style="width:20%; max-width: 150px;" src="../images/image.png" alt="" />
</body>
</html>

据我所知，图像永远不会换行，因为图像的总宽度永远不会超过父元素的100％。

这是一个已知问题还是我遗漏了一些基本问题。

Answer 1

因为我们不知道您的容器和图像的宽度是多少......

它可能与缩放图像时浏览器计算的新图像宽度有关，特别是它可能会“上釉”，从而超过容器的总宽度。

e.g。 img宽度184px * 5 = 920px容器宽度

缩小后

：容器宽度：920px * 20％= 184px; 图像宽度为184px * 20％= 36.8 - ＆gt; 37px

37 * 5张图片= 185px 超出容器宽度

尝试检查已调整大小的图像的宽度，将其乘以5并查看它是否超出容器宽度。

Answer 2

我的猜测是你需要......

body {
    padding:0;
    margin:0;
}

可变/比例宽度图像：大于100％的5x20％？

2 个答案: