Question

我正在拍摄一个有很多图像的摄影网站，他们没有固定的高度和宽度，因为我希望这个网站100％流畅：你如何解决丑陋的Chrome重绘图像？（即图像首先显示在零高度，然后重新调整到最终大小，围绕整个布局移动）

我已经尝试了很多东西，我的最后一个选择是用黑色div隐藏图像重绘，然后在图像加载完成后将其不透明度设置为0（顺便说一下，我用（文档）尝试过这个）。准备好电话，但似乎太快了：你会怎么做？）

Answer 1

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

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

这有助于浏览器避免第二遍布局页面，并优化页面加载！ :)

Answer 2

Chrome（或任何浏览器真的）无法避免这种“重新粉刷”，因为他们不知道正确的图像尺寸。

因此，您需要在图像宽度和高度属性本身中或通过CSS明确指定图像的大小。

Answer 3

我知道我迟到了两年多，但这种做法建议如何here？

<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%; /* ... */

另外，评论部分要注意一个重要的评论，并改进原有的技术：

好戏。但是，如果我是你，我会替换＆＃34; img＆＃34;标记 div上的背景图片（背景图片：封面或背景）包含）。那会避免你的位置技巧，溢出技巧，和浏览器的大量工作。

我希望有人会觉得这很有用。

Answer 4

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

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

如果您希望图像为全宽。这可能会阻止整页重绘，但当然无论图像加载如何都会有一些重绘。您还可以使用Chrome’s --show-paint-rects

调查正在发生的事情

希望有所帮助

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

4 个答案: