HTML CSS – How to Force an Image to Fit and Keep Aspect Ratio

csshtml

I want an image to fill the 100% of its container's width, and I want it to have a max-heigth property set to it, all this keeping the aspect ratio but allowing to lose any part of the image.

img {
   max-height:200px;
   width:100%;
}

I know a similar thing can be done with background-size property but i want to make this to an inline <img> tag.

Any idea of how could i achieve this using CSS? or javascript?

Best Answer

You can try CSS3 object-fit, and see browser support tables.

CSS3 object-fit/object-position Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

JSFIDDLE DEMO

.container-1 {
  width: 150px; /*any size*/
  height: 150px; /*any size*/
  border: 1px solid red;
}

.container-2 {
  width: 300px; /*any size*/
  height: 150px; /*any size*/
  border: 1px solid red;
}

.object-fit-cover {
  width: 100%;
  height: 100%;
  object-fit: cover; /*magic*/
}

<div class="container-1">
  <img class="object-fit-cover" src="https://i.sstatic.net/UJ3pb.jpg">
</div>

<br>

<div class="container-2">
  <img class="object-fit-cover" src="https://i.sstatic.net/UJ3pb.jpg">
</div>

Related Info:

Related Solutions

CSS Responsive Design – How to Maintain Aspect Ratio of a Div

Just create a wrapper <div> with a percentage value for padding-bottom, like this:

.demoWrapper {
  padding: 10px;
  background: white;
  box-sizing: border-box;
  resize: horizontal;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: calc(100vh - 16px);
}

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).

This relies on the fact that for padding :

The percentage is calculated with respect to the width of the generated box's containing block [...] (source: w3.org, emphasis mine)

Padding-bottom values for other aspect ratios and 100% width :

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

Placing content in the div :

In order to keep the aspect ratio of the div and prevent its content from stretching it, you need to add an absolutely positioned child and stretch it to the edges of the wrapper with:

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

Here's a demo and another more in depth demo

HTML CSS – How to Auto-Resize an Image While Maintaining Aspect Ratio

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%;
max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img {
    max-width: 100%;
    max-height: 100%;
}

.portrait {
    height: 80px;
    width: 30px;
}

.landscape {
    height: 30px;
    width: 80px;
}

.square {
    height: 75px;
    width: 75px;
}

Portrait Div
<div class="portrait">
    <img src="https://i.sstatic.net/xkF9Q.jpg">
</div>

Landscape Div
<div class="landscape">
    <img src="https://i.sstatic.net/xkF9Q.jpg">
</div>

Square Div
<div class="square">
    <img src="https://i.sstatic.net/xkF9Q.jpg">
</div>

Best Answer

Related Solutions

CSS Responsive Design – How to Maintain Aspect Ratio of a Div

HTML CSS – How to Auto-Resize an Image While Maintaining Aspect Ratio

Related Question