CODEWITHSUNDEEP
htmlcssflexbox
sirius
sirius

Reputation: 220

Flexbox, limit images heigh/width within space available

I have a fixed size wrapper consisting of:

The problem occurs with images. I would like for images to resize to fit the content container both in height and width. Right now images overflow the wrapper in height.

Here is the code. The wide image is acting correct, resizing to fit, but the long giraf is not. In the following fiddle overflow is set to scroll to debug. The endgoal is no overflow. https://jsfiddle.net/sghp68r0/

A not so flexible solution would simply be to give the imageFit class a height like

img {
  max-width: 100%;
  max-height: 100%;
}
.imageFit {
  object-fit: contain;
  height: 150px;
}

But this I would rather avoid hardcoding the height.

My goal is that it looks like this (no overflow): Result

Upvotes: 0

Views: 70

Answers (2)

sirius
sirius

Reputation: 220

So apparently you can fix overflow in flexbox by setting height of the containing div to 0 (for safari it should be min-height: 0). Have a look at this example. If you remove height breaks.

https://jsfiddle.net/oz20qgw9/

.content {
  background-color: green;
  flex:2;
  height: 0; //THIS IS THE KEY!
}

Upvotes: 0

Anmol Juneja
Anmol Juneja

Reputation: 325

if i am right you want this. Please do let me know.

Drag the height in fiddle you see the images are adjusting with heigh.

Here is my fiddle link:-

https://jsfiddle.net/exa3y7w9/

<div class="wrapper">
  <div class="header">
    Sized to content <br />
    Sized to content <br />
  </div>
  <div class="content">
    <div class="imageWrapper">
      <img src="https://cdn.pixabay.com/photo/2017/10/10/22/24/wide-format-2839089_960_720.jpg">
    </div>
    <div> 2 images and some text that fills remaining space </div>
    <div class="imageWrapper">
      <img src="http://clipart-library.com/data_images/258951.jpg">
    </div>
  </div>
  <div class="footer">
    There is some text in fixed size container
  </div>
</div>

Upvotes: 2

Related Questions