本教程旨在解决web页面中图片加载时常见的布局抖动（cls）问题。通过详细讲解为`
`标签添加`width`和`height`属性的重要性，文章阐述了如何预留图片空间，从而在图片加载完成前稳定页面布局。内容涵盖了基本实现、响应式处理及现代
css
方案，旨在提升用户体验和页面性能。
引言：理解图片加载与布局抖动 (CLS)
在现代Web开发中，用户体验和页面性能是至关重要的指标。其中，布局抖动（Cumulative Layout Shift, CLS）是Google Core Web Vitals中的一项关键指标，它衡量了页面内容在加载过程中非预期地移动的程度。当用户访问一个页面时，如果图片、广告或其他动态内容在加载完成后才占据其最终空间，就会导致页面上的文本和其他元素发生位移，从而破坏用户的阅读流畅性，甚至可能导致用户误点击。这种现象不仅损害了用户体验，也可能对网站的
搜索引擎
排名产生负面影响。
图片是导致CLS的常见元凶之一。当
浏览器
渲染页面时，如果标签没有明确指定其尺寸（宽度和高度），浏览器在图片文件实际下载并解析完成之前，无法得知图片将占据多少空间。这会导致浏览器最初为图片分配一个零高度或默认高度，待图片加载完毕后，再根据其实际尺寸重新计算并调整布局，从而引发明显的布局抖动。
核心解决方案：为标签指定尺寸
解决图片加载引起的布局抖动最直接且有效的方法是为标签明确添加width和height属性。这两个属性会向浏览器提供图片固有的宽度和高度信息，即使图片尚未加载完成，浏览器也能根据这些信息预留出相应的空间。
当浏览器知道图片的尺寸后，它会在渲染页面时为图片元素分配一个占位符空间。这个占位符会保持其固定的宽高比，确保图片加载前后，其在页面上的位置和大小不会发生突变，从而彻底消除因图片加载而导致的布局抖动。
需要注意的是，width和height属性应反映图片的
固有尺寸（intrinsic dimensions）
，即图片文件本身的像素宽度和高度，而非其在页面上最终的显示尺寸。CSS可以随后调整图片的显示尺寸，但width和height属性提供的宽高比是浏览器预留空间的基础。
实践指南：如何应用尺寸属性
以下将通过一个Vue组件中的图片示例，演示如何为标签添加尺寸属性，并结合
响应式设计
进行优化。
原始代码示例
考虑以下Vue组件中的标签：
在这个例子中，标签通过CSS类h-48和padel-img设置了其显示尺寸，但没有直接在标签上指定width和height属性。这正是导致布局抖动的根本原因。
添加尺寸属性
假设about-hero.jpg这张图片的固有尺寸是1920x1080像素。我们应该将这些尺寸添加到标签上：
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
关键改动说明：
width="1920" 和 height="1080"
: 这两个属性告诉浏览器图片文件的原始尺寸。浏览器会根据这个宽高比（1920/1080 ≈ 1.777）预留空间。
height: auto;
: 在CSS中，为了确保图片在
响应式布局
下能够正确地根据其宽度按比例缩放，通常会将height设置为auto。这样，浏览器会根据width属性和CSS定义的宽度（如width: 90%;）以及图片固有的宽高比来计算实际显示的高度。height: unset在某些情况下可能表现不一致，height: auto是更稳健的选择。
通过上述修改，即使图片尚未加载完成，浏览器也会根据width="1920"和height="1080"这两个属性预留一个16:9比例的占位符，从而避免了布局抖动。当图片加载完成后，CSS定义的样式（如width: 90%; max-width: 1560px;）将控制图片的最终显示尺寸，但布局的稳定性已经得到了保障。
进阶优化与现代CSS实践
除了直接在标签上指定width和height属性外，还有一些现代CSS技术和最佳实践可以进一步优化图片加载和布局稳定性。
使用 aspect-ratio CSS 属性
CSS的aspect-ratio属性提供了一种更灵活、更现代的方式来定义元素的宽高比，特别适用于那些没有固有尺寸（如
height="1080"
/>