Делаем картинку такой же высоты как соседний блок с помощью flex и object-fit

04.02.2021

Задача такая, слева размещена картинка, а справа блок, внутри которого какой-то контент или другие блоки. Нужно сделать так, чтобы картинка была такой же высоты как и блок справа на любом разрешении экрана.

Рабочий пример, как растянуть картинку на высоту соседнего блока

See the Pen make image the same height as the neighbor block with CSS Flex by Denis (@deniscreative) on CodePen.dark

Упрощенный код SCSS для блоков одинаковой высоты

// reset for img
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.line {
  display: flex;
  justify-content: space-between;
  max-width: 768px;
  margin: 20px auto;
}

.left {
  flex: 0 1 calc(50% - 10px);
  max-width: calc(50% - 10px);

  .pic-holder {
    height: 100%;
  }

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

.right {
  flex: 0 1 calc(50% - 10px);
  max-width: calc(50% - 10px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .item {
    padding: 40px 20px;
    text-align: center;
    background-color: #ccc;
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

Один нюанс.

Если высота картинки больше чем высота соседнего блока, то картинка может выходить за границы, и поэтому в моем примере элементы внутри соседнего блока растягиваются по высоте, что бы и левый, и правый блоки имели одинаковую высоту.

Полезная инфа:

Оставить комментарий