Variable/scaled width images: 5x20% greater than 100%?
I have come across a problem when optimizing a simple site for mobile/small viewport viewing. I have 5 images, displayed immediately next to each other and have set the width to 20% with no margin, padding or anything else. However, when the viewport is reduced to the point where the images should be scaled, the last always wraps to a new line. I have created a simple test and seen this behaviour in IE and Chrome:
<html>
<head>
<title>Im开发者_如何学运维age 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>
As far as I understand, the images should never wrap since the total width of the images will never total more than 100% of the parent element.
Is this a known issue or am I missing something fundamental.
As we don't know what is the width of your container and of your images...
It may be related to the new image width calculated by the browser when scaling the image, specifically it could get "ceiled" thus exceeding the total width of the container.
e.g. img width 184px * 5 = 920px container width
after scaling down: container width: 920px * 20% = 184px; image width of 184px * 20% = 36.8 -> 37px
37 * 5 images = 185px exceeds the container width
try checking what is the width of your resized images, multiply it by 5 and see if it exceeds the container width.
My guess is you need a...
body {
padding:0;
margin:0;
}
加载中,请稍侯......
精彩评论