如何在加载图像之前保持图像尺寸固有的，以便布局稳定? [英] How to keep an image size intrinsic, before it is loaded, so layout is stable?

问题描述

我一直以为您可以指定<img/>的width和height属性，以便浏览器知道其物理尺寸而不必先下载(至少下载标题).但是，显然，这些属性被视为CSS属性-因此，当您尝试执行类似width: 50%; height: auto之类的操作时，这些属性将被覆盖.然后，直到下载图像，计算出的高度仍为0 .
是否有一种方法可以通过HTML/CSS显式设置图像的物理尺寸(有效地确定其长宽比)?

(...并避免使用砌体"时出现长宽比未知的闪光"/紧张的重新布局-您也许可以解决，但我对基本问题更感兴趣.即使我努力简洁地询问它:)

解决方案

因此，只要我们通过CSS设置height: auto，浏览器就会忽略由width和height HTML属性设置的固有大小.

可能的解决方法和未来的可能解决方案:

1. 使用固有比率框" hack

    <div style="height: 0; padding-bottom: 42.857%; position: relative">
     <img style="position: absolute; left: 0; height: 0; width: 100%; height: 100%" … />
   </div>
    

2. 使用数据URI和JavaScript预加载具有相同长宽比的占位符(请注意舍入错误！)

   <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////////////////////////////////////////////////wAALCAAPACMBAREA/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEE/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwDQgoICv//Z"
     onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
   

   如果我们使用模糊占位符"技术，则该框架可能已经存在.

3. 与两个相同，但使用SVG-易于即时创建，但显然没有免费"模糊占位符

   <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     width='350px' height='150px'%3E%3C/svg%3E"
     onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
   

4. 如果&一旦intrinsicsize登陆( WICG ， <img intrinsicsize="350x150" width="…

当然，所有这些都有缺点.
您可以尝试2& 这支笔中的第3部分-它需要做更多的工作&测试中，我可能会等待4，我认为该问题已解决，不需要修复.愚蠢的浏览器:)

I had always thought you could specify an <img/>'s width and height attributes so the browser knows its physical dimensions without having to download (at least the header) first. But apparently the attributes are treated as CSS properties - and are thus overridden when you try to do something like width: 50%; height: auto. Then, until the image is downloaded, the computed height remains 0.
Is there a way to explicitly set the image's physical dimensions (effectively its aspect ratio) via HTML/CSS?

(...and avoid "flashes of unknown aspect ratio" / lots of nervous re-layouting when using Masonry - which you could perhaps work around, but I'm more interested in the basic problem. Even if i'm struggling with asking succinctly about it :)

解决方案

So, as soon as we set height: auto by CSS, the browser ignores the intrinsic size set by width and height HTML attributes.

Possible workarounds and a possible solution for the future:

1. Use the Intrinsic Ratio Box hack

   <div style="height: 0; padding-bottom: 42.857%; position: relative">
     <img style="position: absolute; left: 0; height: 0; width: 100%; height: 100%" … />
   </div>
   

2. Using data URIs and JavaScript pre-load a placeholder with the same aspect ratio (beware of rounding errors!)

   <img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAFA3PEY8MlBGQUZaVVBfeMiCeG5uePWvuZHI////////////////////////////////////////////////////wAALCAAPACMBAREA/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEE/8QAFBABAAAAAAAAAAAAAAAAAAAAAP/aAAgBAQAAPwDQgoICv//Z"
     onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
   

   If we are using the "blurry placeholder" technique, the framework might already be there.

3. Same as two, but use an SVG - easier to create on the fly, but no blurry placeholder "for free", obviously

   <img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'
     width='350px' height='150px'%3E%3C/svg%3E"
     onload="this.src='https://via.placeholder.com/3500x1500.jpg'"/>
   

4. If & once intrinsicsize lands (WICG, github/Chrome) and gets adopted, there will be a Proper Way to do this:

   <img intrinsicsize="350x150" width="…
   

All of these have downsides, of course.
You can try 2 & 3 in this Pen - it would need more work & testing, I'll probably wait for 4, which I consider a fix for something that shouldn't need fixing. Stupid browsers :)

这篇关于如何在加载图像之前保持图像尺寸固有的，以便布局稳定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！