Как адаптировать высоту изображения под сетку грид или флекс?

Question

Я хочу сделать карточку с двумя колонками. В первой изображение, а во второй контент. Высота контента равна min-content и нужно, чтобы высота изображения всегда была такой же. Причем изначальная высота картинки большего всякого контента. Можно ли сделать это без JS?

Код:

.box {
  display: flex;
  column-gap: 20px;
}

.card__content {
  height: min-content;
}

.card__img {
  overflow: hidden;
}

.card__img img {
  height: 100%;
}

.card__content p {
  margin: 0;
}

<div class="box">
  <div class="card__img">
    <img src="images/products/yummy1.jpeg" alt="">
  </div>
  <div class="card__content">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
  </div>
</div>"

Answer 1

Нужно было задать изображению position: absolute что бы он потерял свою высоту и ширину относительно всего сайта и подчинялся только своему родителю, которого мы указали при помощи position: relative .
Изображению задано width:100% и height:100% для их максимального расширения по ширине или высоте родителя, а также задан object-fit:cover что бы изображение не растягивалось из-за непропорциональности родителя, который постоянно меняет свою высоту и ширину.

.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 20px;
}
.card__img {
    display: block;
    position: relative;
} 
.card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
.card__content p {
    margin: 0;
}

<div class="box">
    <div class="card__img">
        <img src="https://i.sstatic.net/Dyz23U4E.jpg" width="500" height="500" alt="">
    </div>
    <div class="card__content">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Quidem, asperiores!</p>
    </div>
</div>

БЛОГ НА HUSL

Как адаптировать высоту изображения под сетку грид или флекс?

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