Ограничить максимальную высоту изображения, которая зависит от высоты его брата
Как я могу ограничить максимальную высоту изображения, чтобы оно было таким же, как высота его брата, независимо от размера экрана.
Результат, который является приемлемым => Та же высота - √
Результат, который неприемлем, так как высота столбца изображения превышает значение его брата => (DIV - .main-content). Неверный - X
PS Свойство Background-image в этом случае не подходит.
.container {
display: flex;
height: 100%;
}
.container>div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
width: 100%;
height: 100%;
}
<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi. Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo
ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<img src="https://placeimg.com/640/490/nature">
</div>
</div>
1 ответ
Хорошо, похоже, я мог бы найти решение. Одним из способов является позиционирование изображения как абсолютного и "растягивание", в то время как подгонка объекта все еще сохраняет его свойство cover. Если у кого-то есть лучшее решение, не стесняйтесь поделиться.
.container {
display: flex;
height: 100%;
=
}
.container > div {
flex: 1;
}
.main-content {
background: pink;
padding: 20px;
}
.sidebar img {
object-fit: cover;
position: absolute;
top: 0;
bottom: 0;
right: 0;
overflow: auto;
height: 100%;
width: 100%;
}
.sidebar {
position: relative;
}
<div class="container">
<div class="main-content">
Morbi mollis tellus ac sapien. Aenean vulputate eleifend tellus. Donec vitae orci sed dolor rutrum auctor. Cras non dolor. Vivamus quis mi.
Vestibulum rutrum, mi nec elementum vehicula, eros quam gravida nisl, id fringilla neque ante vel mi. Aenean commodo ligula eget dolor. Fusce neque. Quisque libero metus, condimentum nec, tempor a, commodo mollis, magna..
</div>
<div class="sidebar">
<div><img src="https://placeimg.com/640/1000/nature"></div>
</div>
</div>