求助：如何防止Hero Image在大尺寸屏幕下拉伸变形

问题描述 #

我需要解决Hero Image在大尺寸屏幕下的拉伸问题，这应该是个简单的修复方案，但我始终无法实现。该图片在缩小屏幕尺寸及移动端时，借助flexbox可以正常缩放，没有问题。

截图：

现有代码 #

CSS #

.hero {
  width: 100%;
  height: 360px;
  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1000;
  padding-bottom: 10px;
  gap: 50px;
}

.movie-details {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  z-index: 1000;
  padding: 20px;
}

.bg-image {
  position: absolute;
  width: 100%;
  height: 100%;
}

.banner-img {
  opacity: 40%;
  height: 100%;
  width: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

h1 {
  padding-top: 20px;
  font-size: 30px;
}

p {
  font-size: 14px;
}

HTML #

<div class="hero">
  <div class="bg-image">
    <img src="https://via.placeholder.com/800" class="banner-img" />
  </div>

  <div class="movie-details">
    <h1>Movie Title</h1>
    <p>Movie overview.</p>
  </div>
</div>

问题原因 #

你给.banner-img同时设置了width:100%、height:100%和aspect-ratio:16/9，而.hero是固定高度360px。当屏幕宽度超过图片按16:9比例计算的对应宽度时（比如360px高度对应的16:9宽度是640px），width:100%会强制图片铺满整个屏幕宽度，导致高度被拉伸到360px，直接破坏了图片本身的比例，出现拉伸变形。

修复方案 #

方案一：保留固定高度，让图片自动裁剪保持比例 #

修改.banner-img的CSS，移除aspect-ratio，让object-fit: cover发挥作用：

.banner-img {
  opacity: 40%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 移除aspect-ratio，object-fit会自动保持图片原有比例并铺满容器 */
}

object-fit: cover会让图片保持原有比例，同时裁剪多余部分来铺满容器，不会出现拉伸。

方案二：强制容器保持16:9比例，适配所有屏幕 #

如果需要Hero区域始终保持16:9比例，修改.hero和.bg-image的CSS：

.hero {
  width: 100%;
  /* 用aspect-ratio替代固定height，同时设置min-height保证移动端高度 */
  aspect-ratio: 16 / 9;
  min-height: 360px;
  background-color: #222222;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1000;
  padding-bottom: 10px;
  gap: 50px;
}

.bg-image {
  position: absolute;
  inset: 0; /* 替代width:100%和height:100%，更简洁 */
}

.banner-img {
  opacity: 40%;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这样.hero会根据屏幕宽度自动调整高度，保持16:9比例，图片也会跟着保持比例铺满容器，不管屏幕多大都不会拉伸。

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