html - css网格每个元素的高度相等，保持响应能力

Question

我有网格，每个元素下面都有一个图像和其他 div。因为它是一个网格，所以每个元素都有响应宽度，因此它会随着屏幕缩小而自动缩放。我希望元素的图像(可以具有不同的尺寸并且不是同质的)具有相同的高度，同时保持这种响应功能。如果我设置特定高度，随着屏幕缩小，宽高比将不会保持。基本上我需要 YouTube 风格的响应能力，这是一个完美的例子。我该怎么做？

这是我的网格:

JSX:

<div className="home-container">
  {elements.map((el) => (
    <Element el={el}></Element >
  ))}
</div>

CSS:

.home-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-left: 250px;
  grid-auto-rows: 1fr;
  grid-row-gap: 30px;
}

这是我的元素卡:

JSX:

<div className="element-container">
   <div className="element-img">
      <img src={imageUrl} alt={title} />
   </div>
   <div>...</div>
   <div>...</div>
</div>

CSS:

.element-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  height: fit-content;
  border-radius: 10px;
  overflow: hidden;
}

.element-img {
  display: flex;
  margin-bottom: 20px;
}

.element-img > img {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  object-fit: cover;
}

问题: 正如您所看到的，当网格未缩小时，盘子问题是可以的，但随后它不会保持与其他元素相同的纵横比。

Answer 1

概念

1. 在图像周围创建一个包装器以保持纵横比。使用position: relative;并设置 padding-top定义纵横比。

2. 对于图像，设置 position:absolute;将其放置在 wrapper 内。使用object-fit: cover;在覆盖整个容器的同时保持纵横比。设置width:100%;和height:100%;填充容器。

---

解决方案

.home-container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-left: 250px;
  grid-auto-rows: 1fr;
  grid-row-gap: 30px;
}

.element-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  min-height: 250px;
  border-radius: 10px;
  overflow: hidden;
}

.element-img {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  margin-bottom: 20px;
}

.element-img > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 20px;
}

padding-top在.element-img是维持纵横比的因素。当您设置padding-top时您实际上是在创建一个具有指定纵横比的隐形框。 padding-top计算为元素宽度的百分比，因此无论元素的实际宽度如何，它都会保持纵横比，这就是它的响应能力。

---

纵横比

• 宽屏:16:9 = 56.25%
• 标准:4:3 = 75%
• 平方:1:1 = 100%
• 摄影:3:2 = 66.66%
• 超宽:21:9 = 42.85%

您可以使用以下公式计算纵横比:

Padding Percentage = (Height / Width) * 100

16:9 示例:

56.25 = (9/16) * 100

或者您可以使用您认为最有效的任何百分比:)

---

示例

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  padding: 20px;
}

.grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  padding: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.aspect-ratio-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

.aspect-ratio-16-9 img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid-container">
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/300x169" alt="300x169 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/400x225" alt="400x225 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/500x281" alt="500x281 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/600x338" alt="600x338 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/700x394" alt="700x394 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/800x450" alt="800x450 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/900x506" alt="900x506 Image">
    </div>
  </div>
  <div class="grid-item">
    <div class="aspect-ratio-16-9">
      <img src="https://via.placeholder.com/1000x563" alt="1000x563 Image">
    </div>
  </div>
</div>

---

资源

下面我提供了一些相关资源，这些资源可能对 future 用户了解其工作原理和原理以及减少实现和调整方面的问题有用。

• Absolute and Relative Positioning
• Grid Layout Basic Concepts
• Padding-top
• Object-fit
• Aspect Ratios