Column with fixed aspect ratio in two column flex layout

Question

I need an image (image container to be precise) to resize according to container height and maintain its aspect ratio. Longer the text = bigger the image. Right now its ether image getting out of container or just staying still.

article,
.information,
.image {
  margin: 8px;
  border: 2px solid black;
}

article {
  display: flex;
}

.information {
  flex-grow: 1;
}

.image {
  font-size: 0;
}

<article>
  <div class="information">
    <h3>too much text. image must be resized to fill whole height and stay square</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue, turpis in sollicitudin fringilla, sapien augue consectetur augue, id lacinia nibh massa at justo. Praesent pellentesque nunc elementum cursus faucibus. Donec vel diam scelerisque,
      pharetra velit a, pharetra quam. Ut tristique justo id justo pharetra, eget sollicitudin libero mattis.</p>
  </div>

  <div class="image">
    <img src="https://via.placeholder.com/150" />
  </div>
</article>

<hr/>

<article>
  <div class="information">
    <h3>too little text</h3>

    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="image">
    <img src="https://via.placeholder.com/150" />
  </div>
</article>

you said "too much text. image must be resized to fill whole height and stay square" if you set a 150px in height and width 150px that will stay like that. you mean you want it to follow the height when you resize it and not stay as square?. I answered your question it retains to its ratio at square. I am not sure I understand this right. can you be more clear — Crystal, Apr 06 '22 at 19:19
image must fill whole container. if container is higher than 150 pixels, then so must be image — kabukiman, Apr 06 '22 at 19:38
So meaning the width will stay 150px but the height must follow according to text. Is that right? — Crystal, Apr 06 '22 at 19:41
keeping aspect ratio means the width will change with height. if container 200 pixels height, then image must be 200 by 200 pixels so its always square — kabukiman, Apr 07 '22 at 05:59

score 0 · Answer 1 · answered Apr 06 '22 at 19:19

article,
.information,
.image {
  margin: 8px;
  border: 2px solid black;
}

.image{
  width:50%;
 }

.image img{
  height:100%;
  width:100%;
}
article {
  display: flex;
}

.information {
  width:50%;
  flex-shrink:0;
}

.image {
  font-size: 0;
}

<article>
  <div class="information">
    <h3>too much text. image must be resized to fill whole height and stay square</h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer congue, turpis in sollicitudin fringilla, sapien augue consectetur augue, id lacinia nibh massa at justo. Praesent pellentesque nunc elementum cursus faucibus. Donec vel diam scelerisque,
      pharetra velit a, pharetra quam. Ut tristique justo id justo pharetra, eget sollicitudin libero mattis
      
      pellentesque nunc elementum cursus faucibus. Donec vel diam scelerisque,
      pharetra velit a, pharetra quam. Ut tristique justo id justo pharetra, eget sollicitudin libero mattis.</p>
  </div>

  <div class="image">
    <img src="https://via.placeholder.com/150" />
  </div>
</article>

<hr/>

<article>
  <div class="information">
    <h3>too little text</h3>

    <p>Lorem ipsum dolor sit amet</p>
  </div>

  <div class="image">
    <img src="https://via.placeholder.com/150" />
  </div>
</article>

image is no longer rectangle in "to much text" variant – kabukiman Apr 06 '22 at 19:40 — kabukiman, Apr 06 '22 at 19:40

Column with fixed aspect ratio in two column flex layout

1 Answers1