Как я могу ограничить максимальную высоту изображения, чтобы оно было таким же, как высота его брата, независимо от размера экрана.
Результат, который является приемлемым => Та же высота - √
Результат, который неприемлем, поскольку высота столбца изображения превышает его родную = = (DIV - .main-content). Недопустимый - X
PS. В этом случае свойство фона не подходит.
.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>