如何设置宽屏响应式图片默认高度，窄屏等比缩放且无需预下载图片

解决方案 #

你只需要给设置了自定义大屏高度的图片单独添加height: [用户指定高度]规则即可，不需要额外获取图片的宽高参数，浏览器会自动处理替换元素的固有宽高比，配合原有全局样式就能满足需求。 #

核心代码示例 #

/* 全局基础样式保持不变 */
img {
  max-width: 100%;
  height: auto;
}
/* 单独给指定图片设置自定义高度 */
#img1 {
  height: 800px;
}
#img2 {
  height: 1200px;
}

实现逻辑说明 #

1. 大屏场景下：视口宽度足够容纳图片按指定高度等比计算出来的宽度，图片会直接渲染为用户期望的高度，宽度自动适配比例，不受原生尺寸限制，支持放大和缩小两种场景。
2. 小屏场景下：图片按比例计算出的宽度超过视口宽度，max-width: 100%规则生效限制最大宽度，此时浏览器会自动按图片固有比例调整高度，不会出现多余的垂直空白，也能保持等比缩放的特性。

完整HTML代码示例 #

<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<style>
img {
  max-width: 100%;
  height: auto;
}
#img1 {
  height: 800px;
}
#img2 {
  height: 1200px;
}
</style>
</head>
<body>
<div>Before</div>
<img id="img1" src="hole.svg">
<img id="img2" src="hole2.svg">
<div>After</div>
</body>
</html>

兼容性说明 #

该方案依赖浏览器对替换元素固有宽高比的原生支持，所有现代浏览器（Chrome、Firefox、Safari、Edge）都支持该特性，兼容覆盖99%以上的用户场景。

内容的提问来源于stack exchange，提问作者Ciro Santilli OurBigBook.com