Column with fixed aspect ratio in two column flex layout-CodePudding

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

<hr/>

<article>
  <div >
    <h3>too little text</h3>

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

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

CodePudding user response：

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

<hr/>

<article>
  <div >
    <h3>too little text</h3>

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

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

CodePudding user response：

If you want the image to fit the height but have the image remain the same aspect ratio (not stretched) you can use the object-fit: cover attribute on the img itself which will basically create a bounding box for the image and crop anything that doesn't otherwise fit within that space. You can also set the max-width of the image so if you don't want your image to exceed that width it won't. For the sake of the demo I replaced your 150 image with a tree so you can see what happens with the object-fit property.

Try this and let me know if that's what you're looking for:

https://jsfiddle.net/astombaugh/sfe9pac8/9/

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

article {
  display: flex;
}

.information {
  flex-grow: 1;
}

.image {
  font-size: 0;
}

img {
  max-width: 150px;
  margin: 8px;
  border: 2px solid black;
  object-fit: cover;
}

<article>
  <div >
    <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>

  <img src="https://images.unsplash.com/photo-1503785640985-f62e3aeee448?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1174&q=80" alt="Arbol en una puesta de sol" />
</article>

<hr />

<article>
  <div >
    <h3>too little text</h3>

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

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