'How to maintain aspect ratio using HTML IMG tag

I am using an img tag of HTML to show a photo in our application. I have set both its height and width attribute to 64. I need to show any image resolution (e.g. 256x256, 1024x768, 500x400, 205x246, etc.) as 64x64. But by setting the height and width attributes of an img tag to 64, it's not maintaining the aspect ratio, so the image looks distorted.

For your reference my exact code is:

<img src="Runtime Path to photo" border="1" height="64" width="64">
htmlcss


Solution 1:[1]

Don't set height AND width. Use one or the other and the correct aspect ratio will be maintained.

.widthSet {
    max-width: 64px;
}

.heightSet {
    max-height: 64px;
}
<img src="https://picsum.photos/200/250?grayscale" />

<img src="https://picsum.photos/200/250?grayscale" width="64" />

<img src="https://picsum.photos/200/250?grayscale" height="64" />

<img src="https://picsum.photos/200/250?grayscale" class="widthSet" />

<img src="https://picsum.photos/200/250?grayscale" class="heightSet" />

Another option that gives you more flexibility is to use object-fit. This allows fixed dimensions to be set for the img whilst the image itself can be presented in a number of different ways within the defined area.

img {
    width: 64px;
    height: 64px;
    border: 1px solid hotpink;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.scale-down {
  object-fit: scale-down;
}
<img src="https://picsum.photos/200/500?grayscale" class="fill" />

<img src="https://picsum.photos/200/500?grayscale" class="contain" />

<img src="https://picsum.photos/200/500?grayscale" class="cover" />

<img src="https://picsum.photos/200/500?grayscale" class="scale-down" />

Solution 2:[2]

here is the sample one

div{
   width: 200px;
   height:200px;
   border:solid
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
    }
<div>
  <img src="https://upload.wikimedia.org/wikipedia/meta/0/08/Wikipedia-logo-v2_1x.png">
</div>

Solution 3:[3]

Set width and height of the images to auto, but limit both max-width and max-height:

img {
    max-width:64px;
    max-height:64px;
    width:auto;
    height:auto;
}

Fiddle

If you want to display images of arbitrary size in the 64x64px "frames", you can use inline-block wrappers and positioning for them, like in this fiddle.

Solution 4:[4]

<img src="Runtime Path to photo"
     style="border: 1px solid #000; max-width:64px; max-height:64px;">

Solution 5:[5]

Use object-fit: contain in css of html element img.

ex:

img {
    ...
    object-fit: contain
    ...
}

Solution 6:[6]

None of the methods listed scale the image to the largest possible size that fits in a box while retaining the desired aspect ratio.

This cannot be done with the IMG tag (at least not without a bit of JavaScript), but it can be done as follows:

 <div style="background:center no-repeat url(...);background-size:contain;width:...;height:..."></div>

Solution 7:[7]

There's a new CSS property aspect-ratio. It sets a preferred aspect ratio for the box, which will be used in the calculation of auto sizes and some other layout functions.

img {
  width: 100%;
  aspect-ratio: 16/9;
}

It's supported in all well spread browsers.
MDN link: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
And https://web.dev/aspect-ratio/ contains good examples of using this property

Solution 8:[8]

Wrap the image in a div with dimensions 64x64 and set width: inherit to the image: 

<div style="width: 64px; height: 64px;">
    <img src="Runtime path" style="width: inherit" />
</div>

Solution 9:[9]

Try this:

<img src="Runtime Path to photo" border="1" height="64" width="64" object-fit="cover">

Adding object-fit="cover" will force the image to take up the space without losing the aspect ratio.

Solution 10:[10]

Why don't you use a separate CSS file to maintain the height and the width of the image you want to display? In that way, you can provide the width and height necessarily.

eg: 

       image {
       width: 64px;
       height: 64px;
       }

Solution 11:[11]

My site displays a number of photos (with a variety of aspect ratios) and clicking one opens it in a modal. To get it to fit into the modal without cropping, scrolling, or distortion I used the following class on my img tag

.img {
  max-height: 100%;
  max-width: 100%;
  object-fit: scale-down;
}

Solution 12:[12]

You need a div to wrap your image to have a consistente aspect ratio.

You can use the padding-bottom trick to force the div to respect an aspect ratio and a absolute positioned image to fill the space.

The image will be also responsive, taking all the horizontal space available.

.img-frame{
  width: 100%;
  padding-bottom: 100%;
  background: gray;
  overflow: hidden;
  position: relative;
}

.img-frame-4by3{
  padding-bottom: 75%;
}

.img-frame-16by9{
  padding-bottom: 56.25%;
}


.img-frame-5by1{
  padding-bottom: 20%;
}


.img-frame img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div style="max-width:100px; margin: 1rem auto;">
  
  <p>4:3</p>
  <div class="img-frame img-frame-4by3">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
  <br />
  
  <p>16:9</p>
  <div class="img-frame img-frame-16by9">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
  <br />
  
  <p>5:1</p>
  <div class="img-frame img-frame-5by1">
    <img src="http://placekitten.com/g/400/400" />
  </div>
  
</div>

Solution 13:[13]

With css:

.img {
    display:table-cell;
    max-width:...px;
    max-height:...px;
    width:100%;
}

Solution 14:[14]

The poster is showing a dimension constrained by height in most cases he posted >>> (256x256, 1024x768, 500x400, 205x246, etc.) but fitting a 64px max height pixel dimension, typical of most landscape "photos". So my guess is he wants an image that is always 64 pixels in height. To achieve that, do the following:

<img id="photo1" style="height:64px;width:auto;" src="photo.jpg" height="64" />

This solution guarantees the images are all 64 pixels max in height and allows width to extend or shrink based on each image's aspect ratio. Setting height to 64 in the img height attribute reserves a space in the browser's Rendertree layout as images download, so the content doesn't shift waiting for images to download. Also, the new HTML5 standard does not always honor width and height attributes. They are dimensional "hints" only, not final dimensions of the image. If in your style sheet you reset or change the image height and width, the actual values in the images attributes get reset to either your CSS value or the images native default dimensions. Setting the CSS height to "64px" and the width to "auto" forces width to start with the native image width (not image attribute width) and then calculate a new aspect-ratio using the CSS style for height. That gets you a new width. So the height and width "img" attributes are really not needed here and just force the browser to do extra calculations.

Solution 15:[15]

You can set aspect ratio

img {
  width: 64px;
  aspect-ratio: 1/1;
}
<img src="Runtime Path to photo" border="1">

Related Questions