CODEWITHSUNDEEP
htmlcssflexbox
languitar
languitar

Reputation: 6784

Flexbox image scale to height and keep aspect ratio

I have a DIV which is scaled to available height using CSS flexbox. In this DIV is an image which I would like to scale along with the DIV in both dimensions. That means it should be scaled keeping its aspect ratio and the dimensions which is less than the respective DIV dimension should be centered.

I can make the image follow the width of the DIV, but not the height. Therefore, portrait images escape from the DIV bounds.

Here is a jsFiddle to demonstrate the problem.

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}
<div class="container">
  <div class="box"></div>
  <div class="box" style="background: pink;">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

Upvotes: 24

Views: 24346

Answers (5)

Ukr
Ukr

Reputation: 2704

Based on @darrylyeo answer.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Upvotes: 1

Stickers
Stickers

Reputation: 78676

When you specify the height as a percentage value, that is a percentage with respect to the height of the parent element. It is also true with the <img> tag.

In this unknown height flexbox layout, you can use the position tricks to make the image to fit both the width and height of the flex item, and use transform tricks to do the centering.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box:nth-child(2) {
  background: pink;
}
.box img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
<div class="container">
  <div class="box"></div>
  <div class="box">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

You can also use background image, that can make it much easier, the key is to use the value contain. See the simplified demo below.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
}
.box:nth-child(2) {
  background: pink url(//dummyimage.com/300) no-repeat center center / contain;
}
<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Upvotes: 15

L777
L777

Reputation: 8457

Delete the image tag and set it as the background of the .box div with background-size:cover;
jsfiddle 1

or, if you want to avoid cropping:

Delete the image tag and set it as the background of the .box div with background-size:contain;
jsfiddle 2

Upvotes: -1

darrylyeo
darrylyeo

Reputation: 3443

Uses flexbox! (JSFiddle)

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

.container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

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

.box img {
    width: 100%;
    object-fit: contain;
}

The key is to use object-fit: contain; to maintain the aspect ratio, and align-items: stretch; to ensure the image is not cut off on the left and right (might this be a bug?).

Upvotes: 6

Ben Philipp
Ben Philipp

Reputation: 1877

if you can change from flex to block:

https://jsfiddle.net/svArtist/ug6eoxfs/

as @janfoeh pointed out, using object-fit: contain makes it possible:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    position:relative;
}

.container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.box {
    background: yellow;
    width: 100%;
    padding: 0 5%;
    box-sizing:border-box;
    max-width: 100%;
    height: 100%;
    max-height:100%;
    position:relative;
}

.box img {
    height:100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: auto;
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    display:block;
    object-fit: contain;
}

If the Flex Layout is needed, as a last resort you might consider using a background-image, which makes the whole thing really easy: https://jsfiddle.net/svArtist/e1c2tLme/

    background: url(http://placehold.it/300) no-repeat center center;
    background-size: contain;

Other than that, I can't find a way that doesn't involve scripting.

Upvotes: 8

Related Questions