Question

我正在使用CSS网格进行如下所示的布局，但是图像的高度不相等。我虽然可以通过使用对象拟合来实现。

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  height:100%;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      This is a bit longer content that is used to describe something, sometimes it can be really long like this example
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

Answer 1

您如何看待图像的外观？如果它们都应该与兔子图像相同，那么我认为它实际上与您设置的高度有关。我将其更改为min-heigth: 100%而不是height: 100%，它们的大小都与中间的大小相同。

object-fit属性仅告诉图像如何在它们所拥有的空间上分布自己，所以这不应该成为问题。

.row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit: cover;
  min-height: 100%;
  width: 100%;
}

<div class="container">

  <div class="row1">
    <div>
      <img src="https://placeimg.com/1550/485/any">
      <p>
        This is some content 1
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/460/any">
      <p>
        This is some content 2
      </p>
      <p>
        This is a bit longer content that is used to describe something, sometimes it can be really long like this example
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/420/any">
      <p>
        This is some content 3
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

  </div>

</div>

编辑：由于图像的高度不同，我注意到图像看起来仍然有些不均匀。我建议实际上在网格项目中设置要用于图像部分的高度，这样至少在所有三个项目上都应保持一致；那么他们可以使用多少空间的参考将是相同的。

具有明确的min和max高度的示例：

.row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit: cover;
  min-height: 80px;
  max-height: 120px;
  width: 100%;
}

<div class="container">

  <div class="row1">
    <div>
      <img src="https://placeimg.com/1550/485/any">
      <p>
        This is some content 1
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/460/any">
      <p>
        This is some content 2
      </p>
      <p>
        This is a bit longer content that is used to describe something, sometimes it can be really long like this example
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <div>
      <img src="https://placeimg.com/1550/420/any">
      <p>
        This is some content 3
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

  </div>

</div>

Answer 2

^{问题仅发生在chrome上，Fiferox表现得很好}

我可以通过使用对象适配来实现...

object-fit永远不要更改元素的高度/宽度（CSS object-fit: contain; is keeping original image width in layout）。此属性仅在扭曲图像（Object-fit On A Canvas Element）时才可用于保持图像的比例。

现在真正的问题是在这种情况下使用height:100%并不是很直观。如果将其删除，我们将具有以下内容：

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      This is a bit longer content that is used to describe something, sometimes it can be really long like this example
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

请注意，在这种情况下，第二列是如何具有最大高度的列，因此该列定义了轨道的高度：

现在height:100%将相对于所定义的高度，但是它将在第二列中不起作用，因为它将创建一个循环，因为此列最初定义了高度，只有第一张和第三张图片会拉伸，文本将溢出。 （Firefox正在扩展所有列，因此不确定其行为是否正确）

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  height:100%;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      This is a bit longer content that is used to describe something, sometimes it can be really long like this example
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

您可以减少第二列的内容，并且行为会发生变化，因为另一列将定义高度，而另一列中的图像将被拉伸。

.row1 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  grid-gap: 5%;
}

img {
  object-fit:cover;
  height:100%;
  width:100%;
}

<div class="container">

<div class="row1">
  <div>
    <img src="https://placeimg.com/1550/485/any">
    <p>
      This is some content 1
    </p>
        <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/460/any">
    <p>
      This is some content 2
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
    <div>
    <img src="https://placeimg.com/1550/420/any">
    <p>
      This is some content 3
    </p>
    <p>
      This is a bit longer content that is used to describe something
    </p>
    <p>
      <a href="#">Click Here</a>
    </p>
  </div>
  
</div>

</div>

如果您希望图像具有相同的高度，则可能需要更改HTML的结构，以使图像成为网格的一部分，并轻松地将其拉伸到您定义的高度。由于它不依赖于百分比高度的 strange 行为，因此在所有的浏览器中都将起作用。

.row1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 150px auto; /*set the width you want*/
  grid-gap: 5%;
}

img {
  object-fit: cover;
  width: 100%;
  height:100%;
  order:-1;
}

<div class="container">

  <div class="row1">
    <img src="https://placeimg.com/1550/485/any">
    <div>
      <p>
        This is some content 1
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <img src="https://placeimg.com/1550/460/any">
    <div>
      <p>
        This is some content 2
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

    <img src="https://placeimg.com/1550/420/any">
    <div>
      <p>
        This is some content 3
      </p>
      <p>
        This is a bit longer content that is used to describe something
      </p>
      <p>
        <a href="#">Click Here</a>
      </p>
    </div>

  </div>

</div>

网格布局图像的高度不相等

2 个答案: