Как сделать картинки одного размера в колонке

Question

Есть флекс-контейнер, в нем 4 колонки, в каждой колонке по 2 изображения, из-за того, что они разные, колонки становятся разного размера тоже, пробовал через height - не получается, пробовал через html задать высоту картинок - теряются пропорции, что тоже не есть хорошо. Итак, вопрос знатокам: как без потери качества и пропорций привести все картинки и колонки к единой высоте?

.container {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  text-align: center;
}

.gallery { display: flex; }

.gallery__col { width: 25%; }

.gallery__img { max-width: 100%; }

<section class="section">
  <div class="container">
    <div class="section__header">
      <h3 class="section__title">Галлерея</h3>
      <p class="section__text">Эстетика интерьера и кофе</p>
    </div>
  </div>

  <div class="gallery">
    <div class="gallery__col">
      <img class="gallery__img" src="https://picsum.photos/400/600">
      <img class="gallery__img" src="https://picsum.photos/600/400">
    </div>
    <div class="gallery__col">
      <img class="gallery__img" src="https://picsum.photos/500/300">
      <img class="gallery__img" src="https://picsum.photos/700/500">
    </div>
    <div class="gallery__col">
      <img class="gallery__img" src="https://picsum.photos/400/300">
      <img class="gallery__img" src="https://picsum.photos/350/300">
    </div>
    <div class="gallery__col">
      <img class="gallery__img" src="https://picsum.photos/800/500">
      <img class="gallery__img" src="https://picsum.photos/400/400">
    </div>
  </div>
</section>

Answer 1

Если я правильно понял, какой результат Вам нужен, то object-fit вполне справляется с этой задачей. Главное - задать изображениям явные размеры: не max-width, а именно width: 100% и height: 50% (ну, или ту высоту, которая Вам необходима). И display: block для того, чтобы убрать отступы, характерные для inline-элементов:

.container {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
    text-align: center;
}

.gallery {
    display: flex;
}

.gallery__col {
    width: 25%;
}

.gallery__img {
    display: block;
    height: 50%;
    width: 100%;
    object-fit: cover;
}

<section class="section">
    <div class="container">

        <div class="section__header">
            <h3 class="section__title">Галлерея</h3>
            <p class="section__text">Эстетика интерьера и кофе</p>
        </div>

    </div>

    <div class="gallery">
        <div class="gallery__col">
            <img class="gallery__img" src="https://picsum.photos/400/600">
            <img class="gallery__img" src="https://picsum.photos/600/400">
        </div>
        <div class="gallery__col">
            <img class="gallery__img" src="https://picsum.photos/500/300">
            <img class="gallery__img" src="https://picsum.photos/700/500">
        </div>
        <div class="gallery__col">
            <img class="gallery__img" src="https://picsum.photos/400/300">
            <img class="gallery__img" src="https://picsum.photos/350/300">
        </div>
        <div class="gallery__col">
            <img class="gallery__img" src="https://picsum.photos/800/500">
            <img class="gallery__img" src="https://picsum.photos/400/400">
        </div>
    </div>

</section>

БЛОГ НА HUSL

Как сделать картинки одного размера в колонке

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