img 标签设置 width 属性后如何计算 height 属性
根据图片原始比例和设定的宽度，通过乘除法计算高度，确保加载时布局不跳动。计算公式为设定宽度乘以原始高度再除以原始宽度。
根据原始比例计算高度数值
在 HTML 中设置 img 标签的 width 属性后，为了防止图片加载时页面布局发生跳动，需要同时设置 height 属性。浏览器会根据图片的固有尺寸和设定的宽度，按照原始比例计算高度。资料中提到，若图片的固有尺寸为 615 x 419 像素，并将宽度设为 400，则高度应设为 273。计算公式为 400 x 419/615。通过这个公式，可以得出高度的具体数值。
计算时必须使用图片的固有尺寸作为基准。固有尺寸是指图片文件本身包含的像素尺寸，而非网页显示的尺寸。只有基于固有尺寸计算，才能保证图片在加载前后保持正确的长宽比。如果仅设置 width 而不设置 height，浏览器虽然会根据比例自动计算，但这个过程发生在图片加载之后，无法提前预留空间，导致布局跳动。因此，手动计算并设置 height 是最佳实践。
在 HTML 中同时指定宽高属性
计算出的高度数值应直接写入 HTML 的 height 属性中。浏览器在解析 HTML 时，会立即根据 width 和 height 属性分配空间。无论图片是否加载完成，页面布局都会保持一致。资料中强调，同时设置 width 和 height 属性可以防止图片加载时的重排。这是因为浏览器在解析 HTML 时，会立即根据这两个属性分配空间。
在编写代码时，应将计算好的高度值填入 height 属性。例如，在任务中，将高度设为 273。这样，浏览器在渲染页面时就会预留出 400x273 的区域，图片加载完成后直接填充该区域，不会改变页面布局。这种方法简单且兼容性好，能确保用户体验流畅。
验证布局是否稳定
可以通过检查浏览器开发者工具的“布局”面板来验证布局是否稳定。在图片加载前，查看 img 元素的宽度和高度是否与设置值一致。如果布局稳定，说明浏览器已正确预留空间。如果布局在加载过程中发生变化，则说明未正确设置 width 和 height 属性。
另一种验证方法是观察页面的视觉效果。在图片加载前，图片占位区域应保持固定大小。如果占位区域大小随图片加载而变化，说明未正确设置 height 属性。通过对比设置 width 和 height 前后的效果，可以确认布局是否稳定。
避免过度依赖 CSS 控制尺寸
虽然 CSS 可以控制图片尺寸，但过度依赖 CSS 可能导致布局不稳定。例如，如果 CSS 样式被延迟加载或动态修改，图片的显示尺寸可能会发生变化。相比之下，HTML 属性是静态的，能更可靠地预留空间。因此，对于需要避免布局跳动的场景，建议优先使用 HTML 属性。
资料中提到，同时设置 width 和 height 属性是最佳实践。这种方法不仅简单，而且兼容性好。无论使用哪种浏览器，都能确保布局稳定。因此，在开发过程中，应始终将 HTML 属性作为首选方案。如果需要更复杂的样式控制，可以在此基础上叠加 CSS。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。