CODEWITHSUNDEEP
cssflexbox
Alkahna
Alkahna

Reputation: 441

How to stop Flexbox with multiple images from exceeding height of the container?

I have a problem with a flexbox I build.

It has a few images inside (each in their own DIV-element but thats not necessary) and as soon as they start wrapping they dont scale to the height of the container and overflow... Hiding the overflow is no solution because the image need to be fully visible.

I got them to scale in one row and thats fine, but since they are so small you can't see anything anymore I want them to wrap BUT still scale (keeping image ratio).

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 300px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  background: black;
}

.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.box img {
  width: 100%;
  object-fit: contain;
}
<div class="container">
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
</div>

The solution that I'm looking for would be that as soon as the images start wrapping, they scale in size so they will form 2 rows of scaled down images.

Can anyone tell me where my brain got stuck in the process? I tried so many different configurations with flexbox properties like shrink, base and so on.

greetings Alkahna

Upvotes: 3

Views: 545

Answers (1)

Temani Afif
Temani Afif

Reputation: 272744

You can consider adding the image as background and adjust the background property to keep ratio upon scale :

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 400px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  background: black;
}

.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

.box img {
  width: 100%;
  object-fit: contain;
}
<div class="container">
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
</div>

Upvotes: 2

Related Questions