CSS动态hero-image尺寸调整：求Quanta Magazine响应式缩放效果实现代码

核心实现逻辑 #

该效果核心是通过「固定比例容器 + 图片适配规则」实现的，无需JS介入，纯CSS即可完成，具体代码如下： #

1. img标签实现方案（Quanta实际使用的方案） #

HTML结构

<div class="hero-image-container">
  <img 
    src="hero-default.jpg"
    alt="Hero头图"
    class="hero-image"
  >
</div>

核心CSS代码

/* 外层容器：负责固定宽高比，跟随视口缩放 */
.hero-image-container {
  width: 100%;
  /* 按16:9比例固定容器高度，可按需调整数值 */
  padding-top: 56.25%;
  position: relative;
  overflow: hidden;
}

/* 图片标签：适配容器尺寸，不变形 */
.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* 核心属性：保持图片比例填充容器，超出部分自动裁剪 */
  object-fit: cover;
  /* 控制图片裁剪时的焦点位置，保证核心内容不被裁掉 */
  object-position: center center;
}

2. 背景图替代实现方案 #

如果不想用img标签，也可以用背景图实现相同效果：

.hero-image-container {
  width: 100%;
  padding-top: 56.25%;
  background-image: url("./hero-bg.jpg");
  /* 核心背景适配规则 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

效果说明 #

• 外层容器宽度默认跟随父元素/视口宽度同步变化，padding-top用百分比取值，会基于容器宽度计算高度，因此可以始终保持固定的宽高比，不会出现拉伸变形
• object-fit: cover/background-size: cover保证图片始终填满容器，视口缩小时会自动等比缩放适配容器尺寸

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