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.

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

 

 

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.

 

 

 

METHOD 1) AUTOMATIC DIMENSIONS

1A) AUTO WIDTH OR HEIGHT

<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

<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

<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"/>

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

<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

<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>

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

<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.

 

 

 

LINKS & REFERENCES

• CSS Object Fit – MDN
• CSS Flex – MDN
• Aspect Ratio Boxes – CSS Tricks

 

YOUTUBE TUTORIAL

 

INFOGRAPHIC CHEATSHEET