3 Ways to Keep Image Aspect Ratio In HTML CSS

Welcome to a tutorial on how to keep the aspect ratio of an image in HTML and CSS. So you have placed an image on your webpage and decided to resize it a little… But a slight problem happened and the image goes out-of-proportions.

To maintain the aspect ratio of images in CSS, the easiest way is to manually set the dimension of the width, then the height to auto; Or vice-versa, set the height of the image, then the width to auto.

  • img.demoA { width: 600px; height: auto; }
  • img.demoB { width: auto; height: 600px; }

But there are more good methods to keep the aspect ratio, let us walk through a few examples in this guide – Read on to find out!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Aspect Ratio Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

IMAGE ASPECT RATIO

All right, let us now get into the various ways to maintain the aspect ratio of an image in HTML and CSS.

 

METHOD 1) AUTOMATIC DIMENSIONS

1A) AUTO WIDTH OR HEIGHT

1a-auto.html
<img src="alpaca.jpg" style="width: 300px; height: auto;"/>
<img src="alpaca.jpg" style="width: auto; height: 300px;"/>

As in the above introduction, this is the easiest way to maintain the aspect ratio. Manually set the width of the image, then set height: auto (or vice-versa). The browser will automatically calculate the dimensions while retaining the aspect ratio.

 

1B) FLEX LAYOUT

1b-flex.html
<style>
/* (A) FLEX LAYOUT */
#flex-gallery {
  display: flex;
  flex-wrap: wrap;
}
 
/* (B) IMAGES */
#flex-gallery img {
  width: 50%; /* 2 items per row, 100% / 2 = 50% */
  height: auto;
}
</style>
 
<!-- (C) IMAGE GALLERY -->
<div id="flex-gallery">
  <img src="alpaca.jpg"/>
  <img src="alpaca.jpg"/>
  <img src="alpaca.jpg"/>
  <img src="alpaca.jpg"/>
</div>

If you want to build a simple gallery or layout the images in a nice manner – The Stone Age of the Internet is over and responsive design is huge these days. Here are 2 simple tricks that you need to know.

  1. Flex containers – Simply put all the images into a container with display: flex and flex-wrap: wrap. The browser will automatically help to arrange your images in neat rows.
  2. Use percentage width – As above, set the width of the image to a percentage instead of fixed pixels, then set the height to auto. This will resize the image while maintaining the aspect ratio.

 

 

METHOD 2) OBJECT FIT

2A) CONTROLLED IMAGE RESIZE

2a-object-fit.html
<style>
/* (A) FIXED IMAGE DIMENSIONS */
img {
  border: 5px solid red;
  width: 500px;
  height: 200px;
}
 
/* (B) RESIZE BEHAVIOR */
img.contain { object-fit: contain; }
img.cover { object-fit: cover; }
img.scale { object-fit: scale-down; }
img.fill { object-fit: fill; }
</style>
 
<!-- (C) OBJECT FIT DEMO -->
Contain: <img src="alpaca.jpg" class="contain"/>
Cover: <img src="alpaca.jpg" class="cover"/>
Scale Down: <img src="alpaca.jpg" class="scale"/>
Fill: <img src="alpaca.jpg" class="fill"/>
Contain:

Cover:

Scale Down:

Fill:

Following up with the above example, what if we want the image to be contained within fixed dimensions, but scaled proportionally to the aspect ratio? Introducing object-fit.

  • none – The default if not defined, the image will not be resized.
  • contain – The image will be resized to fit into the box while maintaining the aspect ratio.
  • cover – Image will be resized to cover the entire box while maintaining the aspect ratio.
  • scale-down – The image will be resized using none or contain, whichever gives a smaller image.
  • fill – You will probably not want to use this one, it stretches the image to fit the box, disregarding the aspect ratio.

 

 

2B) OBJECT FIT GALLERY

2b-flex.html
<style>
/* (A) FLEX CONTAINER */
#flex-fit-gallery {
  display: flex;
  flex-wrap: wrap;
}
 
/* (B) IMAGES */
#flex-fit-gallery img {
  /* (B1) DIMENSIONS */
  width: 50%; /* 2 items per row, 100% / 2 = 50% */
  height: auto;
  max-height: 300px;
 
  /* (B2) RESIZE BEHAVIOR */
  object-fit: cover; /* none | cover | contain | scale-down | fill */
}
</style>
 
<!-- (C) IMAGE GALLERY -->
<div id="flex-fit-gallery">
  <img src="alpaca.jpg"/>
  <img src="big-cat.jpg"/>
  <img src="alpaca.jpg"/>
  <img src="big-cat.jpg"/>
</div>

Following up with the above simple gallery example again – We cannot expect all images to be of the same size and same orientation. This is where object-fit comes in handy to properly resize and fit the images.

 

METHOD 3) ASPECT RATIO BOX

3A) THE PADDING TRICK

3a-pad-trick.html
<style>
#aspect-div {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio = 9 / 16 = 0.5625 */
  background: #f00;
}
</style>

This will maintain 16:9 ratio:<br>
<div id="aspect-div"></div>

This will maintain 16:9 ratio.

Just what kind of sorcery is this? This final method is an old trick that uses padding to maintain the aspect ratio. Rather confusing, but still quite useful nonetheless.

  • The percentage padding-bottom or padding-top is relevant to the width of the box.
  • So if we want a fixed aspect ratio, simply divide the height by the width.

 

3B) BACKGROUND IMAGE WITH ASPECT RATIO

3b-image.html
<style>
#aspect-img {
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 ratio = 9 / 16 = 0.5625 */
  background: url("alpaca.jpg");
  background-repeat: no-repeat;
  background-size: 100% auto
}
</style>
 
This will maintain 16:9 ratio:<br>
<div id="aspect-img"></div>

Yep – With just a few more lines of CSS, we can add a background image that maintains the aspect ratio.

 

 

USEFUL BITS & LINKS

That’s all for this tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEATSHEET

Maintain Image Aspect Ratio In CSS (Click to Enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published.