1px浏览器的计算问题 [英] 1px Calculation issue with browsers
问题描述
我认为这个问题很常见，并且在SO本身中找到，但是找不到如何解决这个问题。
问题 ：
调整窗口大小时，您会注意到，两个图像的高度在某些时候会有差异（这是浏览器调整缩放时的预期值）。
如何解决这个UI问题？我知道我可以通过使用 flexbox 。但我想有一个更好的解决方案。你能跳吗？
table {width：100％; border-collapse：collapse;} img {display：block; width：100％;}
< table& < tr> < td>< img src =http://placehold.it/100x100/>< / td> < td>< img src =http://placehold.it/100x100/>< / td> < / tr>< / table>
当我使用 display：table ：
.wrapper {width：100％; display：table;}。wrapper div {display：table-cell; } img {display：block; width：100％;}
< div class = wrapper> < div>< img src =http://placehold.it/100x100/>< / div> < div>< img src =http://placehold.it/100x100/>< / div>< / div> >
从@pol更新：
Firefox浏览器中不存在但存在于Chrome中的问题。 p>
@andi：查看使用 flexbox 时会发生什么：
body {margin：0; } .wrapper {width：100％; display：flex;}。wrapper div {flex：1; } img {display：block; width：100％;}
< div class = wrapper> < div>< img src =http://placehold.it/100x100/>< / div> < div>< img src =http://placehold.it/100x100/>< / div>< / div> >
$ b
$ b
浮动和内联块（类似于@mlegg的建议）
{margin：0; } .wrapper {width：100％; display：block;}。wrapper div {display：inline-block; float：left; width：50％;}。wrapper：after {content：''; display：inline-block; clear：both;} img {display：block; width：100％;}
< div class = wrapper> < div>< img src =http://placehold.it/100x100/>< / div> < div>< img src =http://placehold.it/100x100/>< / div>< / div> >
每个图像占据容器的50％。例如，如果容器为100像素宽，则每个图像将为50像素宽。
但是容器的宽度可以是奇数像素，例如。 101px。那么有三种合理的可能性：
- 将一个图像设置为50px宽，另一个51px。然后，即使您为这两个图片指定了相同的宽度，图片也不会同样宽。
- 将两个图片设置为50像素宽。然后会有一个1px的差距
- 将这两个图像放宽51px。
每个选项都有其缺点，但现在的浏览器似乎喜欢第一个选项。然而，在这种情况下，图像具有固有的纵横比，因此不同的宽度将产生不同的高度，然后水平而不是垂直地创建1px的间隙。
它似乎Firefox检测到，因此使较小的图像与另一个一样高，打破了长宽比。 Chrome希望强制实施宽高比。
无法更改此设置。它完全取决于实现：
在所有这一切中，特别奇怪的部分是，真的没有
对， ， 这里。如何通过
渲染引擎的行为不是由CSS规范决定的，具有
，它留给实现来渲染，因为它认为合适。
I think this issue is common and picked it up here in SO itself, but could not find how to solve this.
Problem:
When you resize the window, you will notice that the height of the two images will differ by 1px at times (that is expected when browser adjusts the dimesions).
How do I 'fix' this UI issue? I know I can do that by using a flexbox. But I guess there is a better solution. Could you guys jump in?
table{
width:100%;
border-collapse: collapse;
}
img{
display: block;
width: 100%;
}
<table>
<tr>
<td><img src="http://placehold.it/100x100"/></td>
<td><img src="http://placehold.it/100x100"/></td>
</tr>
</table>
or even here when I use display: table:
.wrapper{
width:100%;
display: table;
}
.wrapper div{
display: table-cell;
}
img{
display: block;
width: 100%;
}
<div class="wrapper">
<div><img src="http://placehold.it/100x100"/></div>
<div><img src="http://placehold.it/100x100"/></div>
</div>
Update from @pol: The issue not there in Firefox browser but exists in Chrome.
@andi: check out what happens when you use a flexbox:
body{
margin: 0;
}
.wrapper{
width:100%;
display: flex;
}
.wrapper div{
flex: 1;
}
img{
display: block;
width: 100%;
}
<div class="wrapper">
<div><img src="http://placehold.it/100x100"/></div>
<div><img src="http://placehold.it/100x100"/></div>
</div>
EDIT:
A non-flexbox solution using floats and inline-blocks (similar to @mlegg 's suggestion)
body{
margin: 0;
}
.wrapper{
width:100%;
display: block;
}
.wrapper div{
display: inline-block;
float: left;
width:50%;
}
.wrapper:after{
content: '';
display: inline-block;
clear:both;
}
img{
display: block;
width: 100%;
}
<div class="wrapper">
<div><img src="http://placehold.it/100x100"/></div>
<div><img src="http://placehold.it/100x100"/></div>
</div>
That's because of Sub-Pixel Problems.
Each image takes 50% of the container. For example, if the container is 100px wide, each image will be 50px wide.
But the width of container could be an odd number of pixels, e.g. 101px. Then there are three reasonable possibilities:
- Make one image 50px wide and the other 51px. Then the images won't be equally wide, even if you specified the same width to both of them.
- Make both images 50px wide. Then there will be a 1px gap
- Make both images 51px wide. Then they won't fit, overflowing the container or wrapping to the next line.
Each choice has its downsides, but nowadays browsers seem to prefer the first option. However, in this case, the images have an intrinsic aspect ratio, so different widths will produce different heights, and then the 1px gap is created horizontally instead of vertically.
It seems Firefox detects than, and thus makes the smaller image as tall as the other one, breaking the aspect ratio. Chrome prefers to enforce the aspect ratio.
There is no way to change this. It's completely implementation dependent:
The especially strange part, in all of this, is that there’s really no right, or wrong, here. How this behavior is supposed to play out by the rendering engine isn’t dictated by the CSS specification, having it be left up to the implementation to render as it sees fit.
这篇关于1px浏览器的计算问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
