CODEWITHSUNDEEP
htmlcssflexbox
NeroCat
NeroCat

Reputation: 3

How to get image in a column to shrink to fit the other column

https://codepen.io/jihyundotkim/pen/eYJMzJR

HTML

<div class="columns">
  <div class="column">
    <p>Brownie cake sweet. Cake bear claw gingerbread. Carrot cake macaroon jujubes candy candy canes cake. Brownie jelly beans liquorice.</p>

<p>Topping pie dessert danish. Jelly-o cotton candy soufflé chocolate cake topping toffee sugar plum lollipop donut. Danish muffin pudding marshmallow lollipop bear claw halvah icing. Icing jelly-o gummi bears.</p>

<p>Topping oat cake pastry bonbon muffin. Cotton candy chocolate bar bear claw chocolate bar lollipop cake. Halvah sugar plum apple pie. Cookie danish oat cake cupcake tootsie roll powder.</p>

<p>Croissant pudding cupcake topping fruitcake chupa chups candy canes liquorice. Chupa chups tiramisu brownie sesame snaps jujubes chocolate bar fruitcake. Oat cake donut sweet roll. Powder marzipan soufflé toffee.</p>

<p>Chocolate pie cookie chocolate cake chocolate cake cotton candy gummi bears topping jelly beans. Jelly-o gummies chocolate. Apple pie chocolate candy powder. Jelly-o halvah pastry carrot cake bear claw sweet roll.</p>
  </div>
  <div class="column">
    <img src="https://i.kym-cdn.com/photos/images/newsfeed/001/295/524/cda.jpg" />
  </div>
</div>

CSS

.columns {display: flex}
.column {flex: 1 1 50%}
img {width: 100%; height: 100%; object-fit: cover;}

2 columns, left one with text and right one with image.

When the text is longer than the image, the image expands to fit the text column's height, which is good. When the image ratio is long and there's not as much text, there's a gap between the bottom line of text and image. Is there CSS a way to force the image on the right to resize to the height of left column?

Thanks in advance

Upvotes: 0

Views: 37

Answers (1)

yinsweet
yinsweet

Reputation: 2851

Below CSS will force the height of the image the same as the left column.

.columns {
  display: flex;
}
.column {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
}

img {
  flex: 1 1 0;
  object-fit: contain;
  overflow: auto;
}

Upvotes: 1

Related Questions