Картинки (изображения) в строке (ряду) одной высоты css используя object-fit.
Есть 4 картинки разного размера:
HTML
<div class="row img-gallery"> <div class="col-md-3 col-12"> <img src="img-1.webp" alt="Картинка 1" /> </div> <div class="col-md-3 col-12"> <img src="img-2.webp" alt="Картинка 2" /> </div> <div class="col-md-3 col-12"> <img src="img-3.webp" alt="Картинка 3" /> </div> <div class="col-md-3 col-12"> <img src="img-4.webp" alt="Картинка 4" /> </div> </div>
CSS
.img-gallery div { overflow: hidden; height: 200px; } .img-gallery img { width: 100%; height: 100%; object-fit: cover; }
Получаем:
Свойство object-fit имеет несколько значений:
object-fit: fill;
object-fit: contain;
object-fit: cover;
object-fit: none;
object-fit: scale-down;
наглядно можно посмотреть по ссылке https://developer.mozilla.org/ru/docs/Web/CSS/object-fit
0 Comments
Recommended Comments
There are no comments to display.