0

Is it possible to maintain the aspect ratio of an image based on the height when it is centered in a flex container like so:

<div class="fillerRow" style="flex: 80%">
    <div class="fillerBox"></div>
    <img id="centerImg" src="./img/image.png"></img>
    <div class="fillerBox"></div>
</div>

.fillerRow {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
}

.fillerBox {
    flex: 1;
}

#centerIImg {
    height: 100%;
    flex: auto;
    width: auto;
}

The idea here is that the image scales based on the screen height while maintaining its aspect ratio. The two fillerBox divs surrounding the image should adjust their own width while respecting the image in the center.

How is this possible?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • `` tags aren't container tags - They don't need to be closed. Closing them is invalid. – Mrigank Pawagi Jan 01 '18 at 07:43
  • Possible duplicate of [CSS3 Flexbox maintain image aspect ratio](https://stackoverflow.com/questions/30788131/css3-flexbox-maintain-image-aspect-ratio) – Temani Afif Jan 01 '18 at 08:02
  • https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css – Temani Afif Jan 01 '18 at 08:02
  • https://stackoverflow.com/questions/20590239/maintain-aspect-ratio-of-div-but-fill-screen-width-and-height-in-css – Temani Afif Jan 01 '18 at 08:02
  • Ive tried all of those –  Jan 01 '18 at 08:05
  • i suppose this is related to the other question here : https://stackoverflow.com/questions/48046992/filling-remaining-width-and-height-around-centered-div/48048217# where i already replied on :) – Temani Afif Jan 01 '18 at 09:31

0 Answers0