Limit image's max-height which depends on its sibling's height

Question

How could I limit an image's maximum height so it would be the same as its sibling's height regardless of screen size.

The result which is acceptable => Same height - √

A result which isn't acceptable since image column height exceeds its sibling's => (DIV - .main-content). Not valid one - X

P.S. Background-image property is not suitable in this case.

.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>

score 1 · Answer 1 · answered Nov 28 '18 at 20:01

Ok, it seem's that I might have found a solution. One way is to position the image as absolute and "stretch it" while object-fit still maintains it's cover property. If someone has some better solution, feel free to share.

.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>

Limit image's max-height which depends on its sibling's height

1 Answers1