前端必看：img标签不可忽视的width与height属性

在前端web开发时，有两种方式在页面中放置图片：一种是使用img标签，一种是使用CSS背景图片。

如果一张图片只是用来装饰，没有其他含义，那么更推荐使用CSS背景图片来实现，这不是我们文章的重点。

当我们使用img标签在页面中嵌入图片的时候，可能很多人都只是在CSS中指定图片的width属性，以此来使图片加载后保持正常的宽高比而不会变形。

这似乎是一种比较完美的写法，width属性可以指定图片的宽度，而高度浏览器会根据图片宽高比进行自动计算。这种方式在图片不确定的情况下是比较通用的写法，但带来的问题是页面的内容可能会发生偏移。

因为图片加载是异步的，在未加载时，浏览器无法知晓图片的尺寸，img标签的高度就是0。在图片加载完成后，浏览器根据图片的尺寸计算出了高度，img的高度不再是0，此时图片后方的内容就会被强制向下偏移，这也会触发页面布局的重新计算。

这会带来两个影响：

如果说现在的硬件性能都已经过剩，那么第二点也是不容忽视的问题。

你可以在Chrome浏览器的性能测试工具中看到布局偏移这一项指标，并也会检测出导致的原因：Unsized image element。

具体有哪些最佳实践方案呢？

我们分两种情况来说。

情况1：已知图片尺寸

我们应该在img标签上设置正确的图片尺寸，这往往是现在很多开发这容易忽视的地方。

html

<img src="xxx.jpg" width="200" height="100" alt="">

然后在CSS中，指定图片在页面中应该渲染的尺寸。

css

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

这样，在图片加载之前，浏览器就能得到img标签应该渲染的尺寸，预留出正确的空间。

img的宽度由CSS中的width: 100%;来决定，高度设置为auto，浏览器会根据img标签上的width="200" height="100"得到图片的宽高比2:1，从而计算出高度宽度*1/2。

如果你不想在img上设置尺寸的话，你也可以在CSS中手动指定图片比例。

CSS

img {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
}

情况2：未知图片尺寸

没有图片的尺寸也就不可能知道图片的比例，所以就不可能有上面如此完美的解决方案。

你只能尽可能的减小布局偏移带来的视觉影响，预估一个图片尺寸。这样在图片未加载的时候，能够让用户提前知道这个区域可能会有一张图片。

CSS

img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1; /* 根据实际情况预估 */
}

你也可以在图片区域提前渲染一个占位符，比如：占位图片，加载动画等，来提升用户的使用体验。

好了，如果你正在做前端页面优化方面的工作，不妨试一试吧，在提升Chrome性能指标的同时，可能也会带来用户体验上的提升。

前端必看：img标签不可忽视的width与height属性 ​