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>

我该怎么做才能保持单元格/格，标题和所有内容完全方形？

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>

难以让儿童潜水员完全适应

1 个答案: