如何实现图片渐进式响应（先缩宽度再缩高度）

你可以通过CSS的clamp()函数结合aspect-ratio属性实现需求，核心逻辑是先通过动态调整图片容器宽度（左右各留10%留白）维持图片高度比例，当宽度缩小到阈值后，再让高度随宽度按比例平滑降低。

完整代码实现 #

CSS 代码 #

.ihero {
  display: block;
  /* 容器宽度逻辑：视口足够宽时占满100%，视口缩小过程中渐进降到80%，最小保持80% */
  width: clamp(80%, 100%, 100%);
  margin: 0 auto; /* 左右居中，实现留白效果 */
  /* 替换为你实际图片的宽高比，比如原图是2:1就写2/1，确保高度始终和宽度成比例 */
  aspect-ratio: 16/9;
  overflow: hidden;
}

.ihero img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 避免图片拉伸，保持内容裁剪适配容器 */
}

HTML 代码 #

<a class="ihero" href="https://example.com/">
  <img src="https://i.sstatic.net/fzY3Uxj6.jpg">
</a>

效果说明 #

1. 浏览器宽度足够时，图片容器占满100%宽度，高度按设置的aspect-ratio自动计算
2. 浏览器宽度缩小过程中，容器宽度从100%渐进式降到80%，此阶段高度因比例固定不会过度缩小
3. 浏览器宽度继续缩小，容器保持80%宽度，高度随宽度按比例平滑降低，避免高度突然变小

更精准的断点控制（可选） #

如果需要对不同屏幕尺寸做更细致调整，可结合媒体查询：

.ihero {
  display: block;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16/9;
  overflow: hidden;
}

.ihero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 屏幕宽度小于768px时，开始渐进缩小容器宽度 */
@media (max-width: 768px) {
  .ihero {
    width: clamp(80%, calc(100% - 40px), 100%);
  }
}

/* 屏幕宽度小于480px时，固定容器宽度为80% */
@media (max-width: 480px) {
  .ihero {
    width: 80%;
  }
}

内容的提问来源于stack exchange，提问作者Monoor