Вопрос по CSS. Как растянуть фото на всю ширину фото?

Question

[Алексей Хаткевич]

№1
№2
Как мне сделать изображения как на первом изображении(любой способой подойдет) ?
Не пойму как их так чтобы небыли растянуты но и в тоже время заполняли всю ширину.
HTML

<div class="galery">
  <div class="">
    <img src="img/header/form/Layer 3.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 13.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 6.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 7.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 5.png" alt="">
  </div>
</div>
<div class="galery">
  <div class="">
    <img src="img/header/form/Layer 9.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 15.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 14.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 4.png" alt="">
  </div>
  <div class="">
    <img src="img/header/form/Layer 12.png" alt="">
  </div>
</div>

CSS

.galery div img {
	background-size: cover;
}

.galery {
	display: grid;
	grid-template-rows: 0fr 0fr;
	grid-template-columns: 20% 20% 20% 20% 20%;
	grid-gap: 0vw;
	width: 100%;

	max-width: 350px;
	overflow: hidden;
}

Comments

[Антон Литвиненко]

img {
width: 100%;
}

[Ross Alex]

Антон Литвиненко, фото разного соотношения сторон. Так не прокатит.

Answer 1

[Ross Alex]

На фото №1 фотографии не по сетке стоят. Попробуйте установить всем в строке фиксированную высоту, а последнему в строке, в фото поставить object-fit: cover;
Это позволит всем фото быть одной высоты, но последний будет обрезаться за счет вписывания в контейнер.

upd. Не grid'ами, а flex'ами делайте... Забыл сказать

Comments

[Алексей Хаткевич]

Спасибо, но что-то у меня не получается :(

[Loonerd2]

Алексей Хаткевич, Возможно, подойдет свойство css для картинок object-fit: contain?