Question

I m working on a photography site with a lot of images and they have no fixed height and width as I want this site to be 100% fluid: how do you work around the ugly Chrome repaint of the images? (i.e. Images are first displayed at zero height and then rescaled to their final size moving around the entire layout)

我试着大量事情,我最后的选择是,用黑手).掩盖形象,然后在图像成像时将其不透明化到零(WBTW,我用文件)。电话: 你们怎么办?

Answer 1

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

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

这有助于浏览器避免了排出你的网页的第二次通行证,并优化了页数。 <代码>:

Answer 2

Chrome(或真的指针)不能避免这种 re死,因为它们不知道你的形象将多少。

因此,你将需要明确标明图像的大小,无论是在图像上,还是在图像上,还是在图像上,或者通过空间安全局。

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

Also, an important remark from the comments section to pay attention to, and improve upon the original technique:

Nice trick. However, if I was you, I would replace the "img" tag with a background image on your div (and background-size: cover or contain). That would avoid you the position trick, the overflow trick, and a lot of work for the browser.

我希望有人会认为这样做是有益的。

Answer 4

很难检测,但你可以尝试在安全局设立护堤/护堤。

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

如果你想要这些图像是完全的。这可能防止整整页的重新油漆,但当然,不管图像的装载情况如何,都会有一些重复。也可以调查在-show-paint-rects

帮助的希望

友情链接