1px浏览器的计算问题

51px

关注

发信

关注(28)粉丝(399)

1px浏览器的计算问题

本文介绍了1px浏览器的计算问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

这是因为。

每个图像占据容器的50％。例如，如果容器为100像素宽，则每个图像将为50像素宽。

但是容器的宽度可以是奇数像素，例如。 101px。那么有三种合理的可能性：

将一个图像设置为50px宽，另一个51px。然后，即使您为这两个图片指定了相同的宽度，图片也不会同样宽。

将两个图片设置为50像素宽。然后会有一个1px的差距

将这两个图像放宽51px。

每个选项都有其缺点，但现在的浏览器似乎喜欢第一个选项。然而，在这种情况下，图像具有固有的纵横比，因此不同的宽度将产生不同的高度，然后水平而不是垂直地创建1px的间隙。

它似乎Firefox检测到，因此使较小的图像与另一个一样高，打破了长宽比。 Chrome希望强制实施宽高比。

无法更改此设置。它完全取决于实现：

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:

这篇关于1px浏览器的计算问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-06 21:46