CODEWITHSUNDEEP
htmlcssflexbox
mstuercke
mstuercke

Reputation: 731

img in flexbox overflows at top and bottom

I have a problem with the flexbox. The image inside should fit into the outer box without overflow. The first and last works perfectly, but the second overflows at the top and the bottom.

How could I fix this?

.outer {
    border: 1px solid red;
    margin: 25px;
    width: 160px;
    height: 160px;
	
    display: flex;
    justify-content: center;
    align-items: center;
}

.outer img {
    max-width: 100%;
}
<div class="outer">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png" />
</div>

<div class="outer">
    <img src="http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png" />
</div>

<div class="outer">
    <img src="http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg" />
</div>

Upvotes: 1

Views: 78

Answers (2)

Fla
Fla

Reputation: 627

You should insert your image in CSS, it's easier to have this behaviour.

.outer {
    border: 1px solid red;
    margin: 25px;
    width: 160px;
    height: 160px;
}

#pengo {
    background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png');
}

#blue {
    background-image: url('http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png');
}

#tumblr {
    background-image: url('http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg');
}

HTML

<div id="pengo" class="outer"></div>
<div id="blue" class="outer"></div>
<div id="tumblr" class="outer"></div>

Then play with background-position and background-size (see MDN) to do place the images, for example:

background-position: center;
background-size: cover; /* or contain*/

Upvotes: 0

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

This is because the height of the second image is greater than the width. The width of the first and third images is either greater than or equal to the height so are constrained by max-width: 100%; which ensures they will never exceed the width of the parent container.

To fix make the following changes to css:

  • Add max-height: 100%; to .outer img - This will ensure the height of the image can never exceed the height of the container

.outer {
  border: 1px solid red;
  margin: 25px;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.outer img {
  max-height: 100%;
  max-width: 100%;
}
<div class="outer">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/72/16x9_by_Pengo.svg/220px-16x9_by_Pengo.svg.png" />
</div>

<div class="outer">
  <img src="http://www.thepixiecollective.com/files/imagecache/product_full/product_images/blue.png" />
</div>

<div class="outer">
  <img src="http://41.media.tumblr.com/fa335632f1b474dd55493757839d2a3a/tumblr_n0ukv5MLqG1qz5uc4o1_500.jpg" />
</div>

Upvotes: 2

Related Questions