设置图像的宽度/高度以避免图像加载回流 [英] Set width/height of image to avoid reflow on image load

问题描述

当我在 html 中使用图像标签时，我尝试在 img 标签中指定它的宽度和高度，这样浏览器甚至在图像加载之前就会为它们保留空间，所以当他们完成加载，页面不会重排(元素不会四处移动).例如:

When I use image tags in html, I try to specify its width and height in the img tag, so that the browser will reserve the space for them even before the images are loaded, so when they finish loading, the page does not reflow (the elements do not move around). For example:

<img width="600" height="400" src="..."/>

现在的问题是我想创建一个更具响应性"的版本，对于单列案例"，我想这样做:

The problem is now I want to create a more "responsive" version, where for the "single column case" I'd like to do this:

<img style="max-width: 100%" src="..."/>

但是，如果我将其与明确指定的宽度和高度混合，例如:

but, if I mix this with explicitly specified width and height, like:

<img style="max-width: 100%" width="600" height="400" src="..."/>

如果图像比可用空间宽，则忽略纵横比调整图像大小.我明白为什么会发生这种情况(因为我固定"了图像的高度)，我想解决这个问题，但我不知道如何解决.

and the image is wider than the available space, then the image is resized ignoring the aspect ratio. I understand why this happens (because I "fixed" the height of the image), and I would like to fix this, but I have no idea how.

总结:我希望能够指定max-width: 100%，并且以某种方式确保加载图像时内容不会重排.

To summarize: I want to be able to specify max-width: 100%, and also somehow make sure the content is not reflowed when the images are loaded.

推荐答案

更新 2:(2019 年 12 月)

UPDATE 2: (Dec 2019)

Firefox 和 Chrome 现在默认处理此问题.只需像往常一样添加 width 和 height 属性.见 这篇博文 了解更多详情.

Firefox and Chrome now deal with this by default. Simply add the width and height attributes as normal. See this blog post for more details.

更新 1:(2018 年 7 月)

UPDATE 1: (July 2018)

我发现了一个更聪明的替代版本:http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/.这仍然需要一个包装元素，它需要 CSS 自定义属性，但我认为它更优雅.Codepen 示例是这里(归功于 Chris Coyier 的 原始).

I found a much cleverer alternate version of this: http://cssmojo.com/aspect-ratio-using-custom-properties-and-calc/. This still requires a wrapper element and it requires CSS custom properties, but I think it's much more elegant. Codepen example is here (credit to Chris Coyier's original).

原文:

来自乔纳森霍林的这篇博文:添加图像的高度和宽度作为内联样式的一部分.这为图像保留了空间，防止图像加载时回流，但它也是响应式的.

From this blog post by Jonathan Hollin: add the image's height and width as part of an inline style. This reserves space for the image, preventing reflow when the image loads, but it's also responsive.

HTML

<figure style="padding-bottom: calc((400/600)*100%)">
  <img src="/images/kitten.jpg" />
</figure>

CSS

figure {
  position: relative;
}

img {
  max-width: 100%;
  position: absolute;
}

figure 可以替换为 div 或您选择的任何其他容器.此解决方案依赖于 CSS calc()，它具有相当广泛的浏览器支持.

The figure can be replaced with a div or any other container of your choice. This solution relies on CSS calc() which has pretty wide browser support.

可以在此处查看正在运行的 Codepen.

Working Codepen can be seen here.

这篇关于设置图像的宽度/高度以避免图像加载回流的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！