使用网格时如何保持图像比例相同？

Question

我在一个页面上显示了 6 个头像，我使用网格将它们分成 2 行和 3 列。每张图片大小相同，但由于某种原因，每行中的第二张图片比第一张图片略大，第三张图片甚至比第二张更大。如何在使用网格时保持图像的所有比例相同并保持设计的响应性？

在非常大的屏幕宽度下，图像大小相同，但随着屏幕宽度变窄，图像大小开始彼此不匹配。

#team-page .grid {
    text-align: center;
}

#team-page .card-container {
  display: grid;
  grid-gap: 20px 0;
  grid-template-columns: auto auto auto;
}

.card {
  display: inline-block;
}

.img-wrap {
  text-align: center;
  margin: 0 10px 10px;
  border-radius: 2px;
  background: #000;
  display: flex;
  flex-direction: column;
}

.text-wrap {
  text-align: left;
  font-size: 18px;
  margin: 0 5px;
  padding-top: 5px;
}

@media (max-width: 1100px) {
  #team-page .card-container {
    grid-template-columns: auto auto;
  }
}

@media (max-width: 600px) {
  #team-page .card-container {
    display: block;
  }
}

<div id="team-page" class="page-width">
    <div class="grid">
        <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
            <div class="card-container">
                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" />
                    </div>
                </div>

                <div class="card">
                    <div class="img-wrap">
                        <img class="member-image" src="https://homepages.cae.wisc.edu/~ece533/images/airplane.png" /> 
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

在 .card-container 中更新 grid-template-columns: repeat(3, minmax(0, 1fr));，因此所有列的宽度都相同：

#team-page .card-container {
  display: grid;
  grid-gap: 20px 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

使用网格时如何保持图像比例相同？

How to keep image proportions the same when using grid?

html

css

css-grid