The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice!


Preserve an Image's Aspect Ratio When Resized

by kirupa   |   24 August 2013

Increasingly, you are expected to create sites and apps that work well on various screen sizes. What this means is that your content needs to nice adapt to the amount of space available. With text, that is pretty easy. Text naturally tends to flow and wrap as needed without any extra encouragement from you. Images are a bit different. They are less willing to adapt to available space.

 If you want your images to resize depending on the amount of space available, you have to do a small amount of extra work. This extra work revolves around ensuring the aspect ratio of the image is maintained as they get resized:

images scaled


In this short tutorial, you will learn all about this small amount of extra work to ensure your images resize as you would like them to.


The Simple Solution Using CSS

The solution we will look at is really simple. To preserve the aspect ratio, all you need to do is set the height and width CSS properties as shown:

.mySelector {
	width: 100%;
	height: auto;

Ensure this style rule applies to an image element, and...that's all there is to it.

By setting the width property to 100%, you are telling the image to take up all the horizontal space that is available. With the height property set to auto, your image's height changes proportionally with the width to ensure the aspect ratio is maintained. The end result is an image that scales up or down perfectly.

To see an example of this, copy and paste the following HTML and CSS into a new HTML document and preview it in your browser:

<!DOCTYPE html>

<title>Image Scaler 9000</title>
	body {
		padding: 25px;
		background-color: #EFEFEF;
	#theImage {
		width: 100%;
		height: auto;
	#container {
		width: 50%;
		margin: 0 auto;



<div id="container">
	<img id="theImage" src="//">



When you preview in your browser, you'll see an image of a feather:

a resizing image

Simply resize your browser window to see the image of the feather scale up or down. Pretty sweet, no?


Tricks such as this fall under the larger bucket of responsive design. Scaling an image up and down is one effective technique to ensure your images size themselves appropriately for the situation. The downside is that a single image cannot effectively display crisply across the range of resolutions and DPIs your content may be viewed in. For a more comprehensive solution, you need to bring in media queries and images of varying sizes to replace a lower resolution image when the time is right.

For a simple, stop-gap solution, though, the approach I've shown here is good enough.

Got a question or just want to chat? Comment below or drop by our forums (they are actually the same thing!) where a bunch of the friendliest people you'll ever run into will be happy to help you out!

When Kirupa isn’t busy writing about himself in 3rd person, he is practicing social distancing…even on his Twitter, Facebook, and LinkedIn profiles.

Hit Subscribe to get cool tips, tricks, selfies, and more personally hand-delivered to your inbox.


Serving you freshly baked content since 1998!
Killer hosting by (mt) mediatemple

Twitter Youtube Facebook Pinterest Instagram Github