Делаем картинку такой же высоты как соседний блок с помощью flex и object-fit
Задача такая, слева размещена картинка, а справа блок, внутри которого какой-то контент или другие блоки. Нужно сделать так, чтобы картинка была такой же высоты как и блок справа на любом разрешении экрана.
Рабочий пример, как растянуть картинку на высоту соседнего блока
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;
}
}
}
Один нюанс.
Если высота картинки больше чем высота соседнего блока, то картинка может выходить за границы, и поэтому в моем примере элементы внутри соседнего блока растягиваются по высоте, что бы и левый, и правый блоки имели одинаковую высоту.
Задача — выводить в десктопной версии несколько слайдов с определенным дизайном, а в мобильной версии…
Мой репозиторий — https://github.com/DenisShapkun/images-optimization. Используем вместо Tinypng десктопный вариант Gulp. Пакетная оптимизация изображений формата PNG,…
В общем, очередная секретная разработка для ускорения процесса создания сайтов. Обычно для верстки я использовал…
CSS генератор треугольников, иногда приходится применять, чтобы создать уголки для каких-то элементов с помощью CSS….
