Force image in flex container to match the height of other flex elements

Question

I have two side by side flex elements with fixed width, one with text and one with an image. How can I force the size of the image in the right container to dynamically match the height of the text in the left container, while preserving the aspect ratio and avoiding cropping?

.flexbox {
    border: 1px solid;
    width: 400px;
    margin: 10px;
    display: flex;
}

.left {
    width: 60%;
}

.right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}

<div class="flexbox">
    <div class="left">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
    </div>
    <div class="right">
        <img src="https://via.placeholder.com/100x200" class="placeholder" />
    </div>
</div>

Probable duplicate - https://stackoverflow.com/questions/34194042/one-flex-grid-item-sets-the-size-limit-for-siblings — Paulie_D, Nov 18 '21 at 19:25

score 2 · Answer 1 · answered Nov 18 '21 at 19:30

Set your image as position absolute inside a relative parent that has flex:1

.flexbox {
  border: 1px solid;
  display: flex;
  width: 300px;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
  flex: 1;
  position: relative;
}

.placeholder{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="flexbox">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </div>
  <div class="right">
    <img src="https://via.placeholder.com/100x200" class="placeholder" />
  </div>
</div>

score 1 · Answer 2 · answered Nov 18 '21 at 19:54

You may also set an height and min-height as a max-width just in case it get distorded.

object-fit & object-position can also help avoid distorsion and resize the picture, At screen it is quiet similar to background-position/background-size but handles a single image at once.

.flexbox {
  border: 1px solid;
  width: 400px;
  margin: 10px;
  display: flex;
}

.left {
  width: 60%;
}

.right {
  width: 40%;
  display: flex;
  justify-content: flex-end;
}

img {
  height: 0;
  min-height: 100%;
  max-width:100%;
  background:yellow;
   /* object-fit/object-position are also options here to avoid image being distorded */
}

.bis img {
  width: 100%;
  object-fit: cover;
  object-position:top 0 left 0;
}

.flexbox {
  transition: 0.25s
}

.flexbox:hover {
  width: 500px;
  font-size: 3rem;
}

hover the flex boxes to increase width and font-size and see img behavior.
<div class="flexbox">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </div>
  <div class="right">
    <img src="https://picsum.photos/id/221/200/400" class="placeholder" />
  </div>
</div>
You may also clip that img vi <code>object-fit</code> and <code>object-position</code>.
<div class="flexbox bis">
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
  </div>
  <div class="right">
    <img src="https://picsum.photos/id/221/200/400" class="placeholder" />
  </div>
</div>

Force image in flex container to match the height of other flex elements

2 Answers2