Почему картинка вылазит за пределы блока?

Question

Указал ограничение max-height: 400px для всей сетки grid. Но дочерние элементы вылезают за пределы, хотя должны растягиваться по height относительно размеру родителя.

https://codepen.io/Alexxxsander/pen/XWOGedj

<div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
  </div>

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
  gap: 10px;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

Answer 1

Если добавить свойство overflow-y: auto; к классу .grid, это создаст вертикальную прокрутку так как содержимое внутри блоков .grid__col превышает установленную высоту блока .grid. Таким образом, часть содержимого скрыта, и появляется полоса прокрутки для просмотра скрытой части.

https://codepen.io/dovgaldmitriy/pen/abXMVBa

* {
  box-sizing: border-box;
}

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  outline: 2px solid royalblue;
  max-height: 400px;
  gap: 10px;
  overflow-y: auto;
}

.grid__col {
  height: 100%;  
}

.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.grid__col:last-child {
   grid-column: 3 / -1;
 }

.grid__col img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="grid">
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
    <div class="grid__col">
      <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
    </div>
</div>

Answer 2

Насколько я понял, изображения должны сохранять соотношения сторон и при этом заполнять полностью блоки в которых находятся. Тогда достаточно добавить этим ячейкам (блокам) свойство overflow: hidden. Картинки будут обрезаны, если размеры и пропорции не позволяют полностью вписать их в контейнеры.

* { box-sizing: border-box; }

.grid {
  display: grid;
  grid-template: repeat(2, 1fr) / repeat(4, 1fr);
  gap: 10px;
  height: 400px;
  outline: 2px solid royalblue;
}

.grid__col {
  overflow: hidden;
}
.grid__col:nth-child(2) {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}
.grid__col:last-child {
  grid-column: 3 / -1;
}

.grid__col img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

<div class="grid">
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
  <div class="grid__col">
    <img src="https://biggardenfurniture.com.au/wp-content/uploads/2018/08/img-placeholder.png" alt="">
  </div>
</div>

БЛОГ НА HUSL

Почему картинка вылазит за пределы блока?

Ответы (2 шт):