Сетка макета изображения не равна высоте

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

^{Проблема возникает только на хроме, Fiferox восстанавливает эту скважину}

Я думаю, что это было бы так при использовании подгонки объекта ...

object-fit никогда не изменять высоту / ширину элемента ( CSS-подбор объекта: содержать; сохраняет ширину исходного изображения в макете ). Это свойство полезно только для сохранения соотношения изображения, когда оно искажено ( Подгонка объекта к элементу холста )

Теперь настоящей проблемой является использование 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% будет относительно этой высоты, но не будет работать во втором столбце, поскольку создаст цикл, так как этот столбец изначально определял высоту, и только 1-е и 3-е изображение будет растягиваться и текст переполнится. (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-кода, чтобы сделать изображение частью сетки и легко растянуть их до той же высоты, которую вы определили. Это будет работать одинаково во всех браузерах, так как не зависит от странного поведения в процентах от высоты.

.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>

Answer 2

Как вы ожидаете, что изображения будут выглядеть? Если все они должны быть такими же, как изображение кролика, я думаю, что это действительно связано с высотой, которую вы устанавливаете; Я изменил его на 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>

РЕДАКТИРОВАТЬ : я заметил, что изображения все еще выглядят немного неровными, потому что изображения имеют разную высоту; Я бы предложил на самом деле установить высоту, которая будет использоваться для секции изображения в элементе grid, так что, по крайней мере, это будет согласовано для всех трех элементов; тогда ссылка на то, сколько места они могут использовать, будет одинаковой.

Пример с явными 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>