裁剪带透明边距图片后CSS网格布局空白问题求助

我使用的图片尺寸为350×525px，上下各约90px为透明区域，实际内容集中在中间350×350px区域。我希望仅展示该区域内容并添加圆角，编写了如下CSS代码：

img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  border-radius: 2rem;
}

这段代码能裁剪掉上下透明区域，得到1:1比例的圆角图片，但容纳图片的<div>容器高度未变化，导致网格布局中出现大量空白。

我使用React与styled-components开发，以下是等效的HTML和CSS代码：

网格容器代码 #

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 2rem;
}

卡片结构与样式 #

HTML结构 #

<div class="card">
  <a href="#">
    <img src="image-path" alt="" />
    <h4>some text</h4>
  </a>
</div>

CSS样式 #

img {
  width: 100%;
  height: 60%;
  object-fit: cover;
  border-radius: 2rem;
}

a {
  text-decoration: none;
}

h4 {
  text-align: center;
  padding: 1rem;
}

解决方法 #

核心是让图片所在的容器强制保持1:1比例，既正确展示中间的图片内容，又消除多余空白。

方案1：兼容旧浏览器的padding-top比例法 #

给图片添加外层容器，利用padding-top实现1:1的固定宽高比：

修改后的卡片结构

<div class="card">
  <a href="#">
    <div class="img-wrapper">
      <img src="image-path" alt="" />
    </div>
    <h4>some text</h4>
  </a>
</div>

对应的CSS

.img-wrapper {
  width: 100%;
  padding-top: 100%; /* 基于宽度的100% padding，实现1:1比例 */
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
}

.img-wrapper img {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-50%); /* 向上偏移50%，显示图片中间区域 */
  object-fit: cover;
}

/* 保留原有样式 */
a {
  text-decoration: none;
}

h4 {
  text-align: center;
  padding: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 2rem;
}

方案2：现代浏览器简洁方案（aspect-ratio） #

如果无需兼容旧浏览器，直接使用aspect-ratio属性更高效：

修改后的CSS

a {
  text-decoration: none;
  display: block;
}

a > img {
  width: 100%;
  aspect-ratio: 1/1; /* 强制1:1宽高比 */
  object-position: center; /* 确保图片居中显示，裁掉上下透明区 */
  object-fit: cover;
  border-radius: 2rem;
}

/* 保留原有样式 */
h4 {
  text-align: center;
  padding: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  grid-gap: 2rem;
}

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