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.

Onwards!

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

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

</style>
</head>

<body>

<div id="container">
	<img id="theImage" src="//www.kirupa.com/html5/examples/blueFeather.png">
</div>

</body>

</html>

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?

Conclusion

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.

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly via e-mail, facebook, or twitter.

Brought to you by...

Kirupa Chinnathambi
I like to talk a lot - A WHOLE LOT. When I'm not talking, I've been known to write the occasional English word. You can learn more about me by going here.

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Awesome and high-performance web hosting!
BACK TO TOP
new books - yay!!!