自动摘要
正在生成中……
在网页设计中，图片加载前后可能导致页面布局跳动的现象很常见。尤其当图片加载时间较长时，图片未加载完成前页面为它预留的空间与加载完成后的实际尺寸不符，用户会看到布局调整的效果，影响体验。本教程将解释如何使用 HTML 和 CSS 技巧，避免这种问题。
问题描述
-
图片加载前的抖动：如果在
img 标签中定义了 width 和 height 属性，但图片所在的容器宽度小于这些预设值，加载完成后，图片会缩小适应容器宽度，可能导致用户看到“缩小”的视觉效果。
-
高度为 0 的问题：如果没有设置
width 和 height，图片在未加载时没有高度，页面无法为图片预留空间，导致图片加载完成后页面布局会发生跳动。
解决方案：使用 aspect-ratio 与 width、height 属性
通过结合 aspect-ratio 属性和保留 img 的 width 和 height 属性，可以确保在图片加载前后，页面布局不会发生跳动。具体步骤如下：
步骤 1: HTML 中保留 width 和 height 属性
HTML 的 width 和 height 属性能够帮助浏览器在图片尚未加载时预留空间。例如，对于一张 400x267 的图片，可以定义：
<img src="a.jpg" width="400" height="267" alt="example image">
在图片加载之前，浏览器会根据这两个属性为图片预留 400px 宽、267px 高的空间，避免页面元素因图片加载延迟而发生抖动。
步骤 2: 使用 aspect-ratio 来保持图片宽高比
为了确保图片能够根据容器宽度自动缩放并保持正确的宽高比，使用 CSS 的 aspect-ratio 属性。比如对于一张 400x267 的图片，宽高比为 400 / 267：
img {
width: 100%; /* 让图片宽度适应容器 */
height: auto; /* 根据宽度自动调整高度 */
aspect-ratio: 400 / 267; /* 设置宽高比，避免图片变形 */
}
aspect-ratio 会根据宽高比例自动调整图片高度，从而保证图片缩放时不失真。即使容器宽度小于图片的原始宽度，图片也会保持原始比例进行缩放，避免视觉缩小的效果。
步骤 3: 结合 width、height 与 aspect-ratio 的好处
-
宽高预留：
width="400" 和 height="267" 属性为图片在未加载时提供初始的空间预留，避免页面在图片加载时重新计算布局。
-
比例控制：
aspect-ratio 确保图片缩放时保持正确的宽高比例，适应不同大小的容器，防止图片变形。
-
避免抖动：
aspect-ratio 和 width、height 一起作用，确保图片加载前后，页面的布局保持一致，不会因图片加载导致的高度调整而抖动。
其他处理方法
除了 aspect-ratio，还有其他一些方法可以避免图片加载前后布局跳动：
-
使用 padding-bottom 技巧：通过设置容器的 padding-bottom 来保持宽高比，从而预留空间。比如：
.image-container {
position: relative;
width: 100%;
padding-bottom: 66.75%; /* 267/400 = 66.75% */
overflow: hidden;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
这种方式通过 padding-bottom 设置容器的高度，确保图片加载前后高度保持不变。
-
占位符图片（Placeholder）：通过加载一张低分辨率的占位符图片，在实际图片加载之前先显示一张占位图，等图片加载完成后再替换。
总结
通过结合使用 HTML 的 width、height 属性与 CSS 的 aspect-ratio，你可以有效避免图片加载前后页面布局的跳动问题。aspect-ratio 能够确保图片缩放时保持正确的比例，而 width 和 height 属性则帮助浏览器在图片加载前预留正确的空间。这样，不论容器的大小如何变化，都能确保图片加载的顺滑和页面布局的稳定。