CODEWITHSUNDEEP
htmlcssresponsive-designflexbox
Pikachu
Pikachu

Reputation: 1993

Img inside Flexbox responsitivity issue

I have fragment of code with flex div, and an img inside it:

html, body {
  height: 100%;
  margin: 0;
}
.container {		
  display: flex;
  align-items: center;
  justify-content: center;		
  width: 100%;
  height: 100%;
  background: black;
}
.item {
  max-height: 100%;
  max-width: 100%;		
}
<div class="container">
  <img src="https://i.sstatic.net/aHBI2.png" class="item">
</div>

On Chrome and IE, while I'm resizing window vertically, the image is only responsive in the vertical direction. The width is not changing proportionally to the height (decreasing in that case). On Firefox everything is OK.

Do you know this problem?

http://jsfiddle.net/z2v9o9ew/1/

Upvotes: 1

Views: 115

Answers (1)

Stickers
Stickers

Reputation: 78676

You could use viewports units if the container is going to take the entire screen size. And don't forget to set up the height for html and body tags.

http://jsfiddle.net/hsn43uzq/

html, body {
    height: 100%;
    margin: 0;
}
.container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: black;
}
.item {
    max-width: 100vw;
    max-height: 100vh;
}
<div class="container">
    <img src="http://dummyimage.com/500" class="item" />
</div>

As a workaround, you could drop flex, and use css transform for centering the image.

http://jsfiddle.net/5k84mfft/

html, body {
    height: 100%;
    margin: 0;
}
.container {
    width: 100%;
    height: 100%;
    background: black;
    position: relative;
}
.item {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
<div class="container">
    <img src="http://dummyimage.com/500" class="item" />
</div>

Edit: problem also can be solved by simply adding this as OP suggested, although we don't have a clue why it works.

flex-direction: column;

Updated demo and see the related comments underneath.

Upvotes: 1

Related Questions