Chrome中的流体图像：如何避免重绘？

Question

我正在制作一个摄影网站，其中有很多图片，它们没有固定的高度和宽度，因为我希望该网站是100%流体的：如何解决Chrome对图像进行丑陋重绘的问题？（即，图像首先以零高度显示，然后在整个布局中移动并重新调整大小）

我已经尝试了几乎所有的方法，最后的选择是用黑色div隐藏图像重绘，然后在图像加载完成后将其不透明度设置为0（顺便说一下，我尝试过使用(document).ready调用，但似乎太早了：你会怎么做？）

- teolives

Answer 1

请指定您的图像高度和宽度属性/其尺寸。

<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">

这将帮助浏览器避免第二次布局您的页面，并优化页面加载速度！ :)

- Zhianc

---

这也是我会这样做的方式。这使得图像渲染前的空白空间大小正确。 - jimplode

这几乎完全违背了拥有灵活图片的目的！ - teolives

@teolives 如果这个回答解决了你的问题，请不要忘记将其标记为最佳答案。谢谢！ - Zhianc

Answer 2

Chrome（或任何浏览器）无法避免这种“重绘”，因为它们事先不知道您的图像将是什么大小。

因此，您需要明确指定图像的尺寸，可以在图像的宽度和高度属性本身中指定，也可以通过CSS指定。

- Willem Mulder

---

我不同意，只有Webkit浏览器在渲染过程中似乎从0高度开始：FF，IE，Opera都会为图片留出空间，而不需要重新调整整个布局。 - teolives

Answer 3

我知道我晚了两年，但是这个练习建议在这里如何？

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</div>


.embed-container {
    position: relative;   
    height: 0;
    overflow: hidden;
    background-color:black;  
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* ... */  

此外，评论区的一条重要备注需要注意并改进原始技术：

不错的技巧。但是，如果我是你，我会用背景图替换“img”标签，并在div上使用background-size: cover或contain。这样可以避免定位技巧、溢出技巧以及浏览器的大量工作。

希望有人会发现这个有用。

- pilau

Answer 4

这很难测试，但你可以尝试在CSS中设置宽度/高度

img {display: block; width: 100%; height: auto;}

如果您想要图片全宽显示。这可能会防止整个页面重绘，但当图片加载时仍然会有一些重绘。您还可以调查Chrome的--show-paint-rects正在发生什么。

希望能对您有所帮助。

- Oli Studholme