Problem with responsive images inside Flexbox

Question

Problem with responsive images inside Flexbox

I encountered an issue with a code snippet involving a flex div containing an img:

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>

While resizing the window vertically in Chrome and IE, I noticed that the image was only responsive in the vertical direction. The width did not adjust proportionally to the decreasing height. However, this problem did not occur in Firefox.

Have you come across this issue before?

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

html css responsive-design flexbox

Answer 1

Answer №1

If the container is going to take up the entire screen size, consider using viewports units. Remember to set the height for both html and body tags as well.

Check out this example: 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>

Alternatively, you can use css transform instead of flex to center the image:

Example here: 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: Another solution is adding flex-direction: column;, which seems to work despite not fully understanding why it does the trick.

flex-direction: column;

See the updated demo here: Updated demo along with the comments section.

Answer 2

If the container is going to take up the entire screen size, consider using viewports units. Remember to set the height for both html and body tags as well.

Check out this example: 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>

Alternatively, you can use css transform instead of flex to center the image:

Example here: 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: Another solution is adding flex-direction: column;, which seems to work despite not fully understanding why it does the trick.

flex-direction: column;

See the updated demo here: Updated demo along with the comments section.

Problem with responsive images inside Flexbox

Answer №1

Similar questions

Creating margins between columns in Bootstrap can easily be accomplished by adjusting the padding or gutter settings

"Ensuring that the embedded PDF in Bootstrap is not taking up the

The counter up function pauses when scrolling and displays an error message

Issues with NextJS CSS modules: unexpected behavior or not functioning as expected?

Matching Javascript Variables to CSS Styles

Saving an Echo Command in a Variable

Styling with CSS3: positioning floating divs on top of a non-floated div

Utilizing the enter key function for form submissions on lists in AngularJS

Steps for configuring UI-Router to open a new tab

Column 1 with fixed headers

What is the best way to select just the innermost row of a nested table for emphasis?

Tips for implementing CSS media queries on video posters

Locate tags utilizing CSS selectors excluding their children elements

Removing border of the top and bottom of jspdf pages

Exploring the versatility of CSS variables in JavaFX

The Bootstrap navbar-fixed-top is failing to function properly within the confines of my "content" div

Bootstrap causing partial failure in PHP script

Transferring Information Between HTML Text Fields

Different body background color changes every second

Expanding canvas due to the utilization of column-count