4

我在一个有很多图像的摄影网站上工作，它们没有固定的高度和宽度，因为我希望这个网站是 100% 流畅的：你如何解决丑陋的 Chrome 重绘图像？（即图像首先以零高度显示，然后重新缩放到在整个布局中移动的最终大小）

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

4

4 回答 4

3

Specify your image's height and width attribute / its dimensions.

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

This helps the browser avoid a second pass to layout your page and it optimizes page load as well! :)

于 2011-11-17T11:47:07.980 回答
1

Chrome（或任何浏览器）都无法避免这种“重绘”，因为他们不知道你的图像的大小。

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

于 2011-11-17T12:11:56.513 回答
1

我知道我迟到了两年多，但是这里建议的做法怎么样？

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

此外，评论部分的重要评论要注意并改进原始技术：

好把戏。但是，如果我是你，我会用你的 div 上的背景图像替换“img”标签（和背景大小：覆盖或包含）。这样可以避免定位技巧、溢出技巧以及浏览器的大量工作。

我希望有人会发现这很有用。

于 2013-12-16T19:14:08.217 回答
0

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

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

如果您希望图像是全角的。这可能会阻止整页重绘，但当然，无论图像加载如何，都会有一些重绘。您还可以调查Chrome 的情况--show-paint-rects

希望有帮助

于 2012-03-24T05:51:14.357 回答