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

AStombaugh · Answer 2 · 2022-04-07T17:18:22.050

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>

its not stretching alright, but its cropped. [this is what im trying to achieve](https://i.imgur.com/FIMR2Gi.png) — kabukiman, Apr 07 '22 at 06:10
Okay, I understand now. See above for updated answer and let me know if that helps :) — AStombaugh, Apr 07 '22 at 13:21
There are two of
elements just for example. Text on the left in ".information" block defines
height. ".image" on the right fills that height and takes all the width that it needs to be perfectly square. Both elements must strike perfect balance. To sum it up: more text means bigger article. Bigger article means bigger image. Bigger image means less horizontal space for text. Less horizontal space for text means it takes more vertical space. Im not sure this even possible with css alone. There must be no space under image on any viewport sizes and image must be always square — kabukiman, Apr 07 '22 at 14:05
See my most recent update and see if that works for you. You'll likely have to add additional media queries to keep space from appearing under the image but if you're getting into viewport sizes that are that small you should consider redistributing your layout anyway as you don't want to strain viewers on mobile devices. There may be some JS solutions to what you're looking for but that's an entirely new can of worms to open. — AStombaugh, Apr 07 '22 at 17:20
there is some space still. i guess it can't be helped. thanks anyway — kabukiman, Apr 07 '22 at 18:22
If you can post a screenshot of what you're seeing I might be able to troubleshoot it further, but you could look at this thread and see if there's anything in there that helps: https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css?rq=1 `aspect-ratio` is still relatively new for CSS and it does do some of what you're asking for but once you start contracting the page and forcing the text column to get larger you're essentially back in the same spot. — AStombaugh, Apr 07 '22 at 20:34

Column with fixed aspect ratio in two column flex layout

2 Answers2