'Column with fixed aspect ratio in two column flex layout

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>
htmlcssflexboxdynamic-columns


Solution 1:[1]

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>

Solution 2:[2]

Updated based on OP's recent comment:

So we'll treat both images and boxes the exact same and we'll use viewport units to control the scaling so that the image to the right always stays square. I broke up the container into two separate containers for images and text boxes so that they can be styled independently and also added styling to the header and paragraph tags so you can change whatever you need to in those without affecting the rest of the layout.

Keep in mind that at some point you will have more text vertically than you can scale, so I've introduced a @media query to change the way the image element sizes. By that point you're in mobile device territory and you should consider using @media to modify your layout anyway so you're not asking people to read a very small column of text on a small screen.

This isn't the perfect solution but outside of using js to dynamically calculate the sizing, I don't know that there's much else you can do as far as pure CSS goes. Let me know what you think.


*,
*::before,
*::after {
  box-sizing: border-box !important;
}

article {
  display: flex;
  gap: 8px;
  margin: 8px;
  padding: 8px;
  border: 2px solid black;
}

.textContainer {
  background-color: #f4f4f4;
  width: 100%;
  border: 2px solid black;
}

.imageContainer {
  border: 2px solid black;
}

.image {
  align-content: center;
  justify-content: center;
  display: flex;
  min-height: 100vw;
  height: 100vh;
  margin-top: -85vw;
  padding-top: 85vw;
}

h3 {
  margin: 0 auto;
  padding: 5px
}

p {
  margin: 0 auto;
  padding: 5px;
}

@media (max-width: 42.5em) {
  .image {
    min-height: 100vw;
    height: 100vh;
    margin-top: -100vw;
    padding-top: 100vw;
  }
}


<body>
  <article>
    <div class="textContainer">
      <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>
    <div class="imageContainer">
      <div class="image">
        <img src="https://via.placeholder.com/150" />
      </div>
    </div>
  </article>

  <hr />

  <article>
    <div class="textContainer">
      <div class="information">

        <h3>too little text
        </h3>

        <p>Lorem ipsum dolor sit amet

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sijo Varghese
Solution 2

Related Questions