难以保持子 Divs 完全正方形

Question

我在保持我的响应式网格完全正方形时遇到了一些困难。我尝试将图像的尺寸设置为将 div 的尺寸控制为更接近正方形的一种方式，但这并没有像我想象的那样工作。

接下来是我现在正在使用的内容。如您所见，在非常宽的显示器上，尺寸更加方形，而在较窄的显示器上，图像非常高且失真（例如，不是方形）。

.one {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(100px, auto);
}

.one img {
  object-fit: cover;
  object-position: center;
  height: 480px;
  width: 100%;
}

.one h3 {
  background-color: pink;
  color: black;
  font-weight: 700 !important;
  padding: 0.5em;
  margin: 0;
}

<div class="one">

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>


</div>

我可以做些什么来保持单元格/div、标题和所有内容完全正方形？

Answer 1

这是因为您已将所有图像设置为height: 480px，而不管宽度如何。因此，当图像的宽度设置为 100% 时，它们在较小的屏幕尺寸上变得更窄，但高度保持不变。您可以改为将高度更改为max-height: 480px。

.one {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
  grid-auto-rows: minmax(100px, auto);
}

.one img {
  object-fit: cover;
  object-position: center;
  max-height: 480px;
  width: 100%;
}

.one h3 {
  background-color: pink;
  color: black;
  font-weight: 700 !important;
  padding: 0.5em;
  margin: 0;
}

<div class="one">

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>

  <div>
    <h3>
      Title
    </h3>
    <img src="https://i.imgur.com/9gH79q1.jpg" />
    <p>
      Some description text
    </p>
  </div>


</div>