Home / Articles / Programming languages / Markup languages / HTML & CSS / How to resize images proportionally using CSS for responsive web design

How to resize images proportionally using CSS for responsive web design

How to resize images proportionally using CSS for responsive web design
 
How to resize images proportionally using CSS for responsive web design
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


One of the important parts of a responsive web design is resizing the image automatically to fit the width of its container. Actually it's very easy, all you need to do is to set the appropriate value for max-width CSS property.

img {
  max-width: 100%;
}

The styles above don't allow any img element to become wider than its container element. If the container is narrower than the image, the image will be resized to the container width.

To see it in action, just try to resize browser window in the following example:

Live demo

But, there is a case when these styles won't work. It happens when img element has a defined width and height dimension attributes in HTML. In that case the image will keep its height which is defined in HTML while its width will be adjustable. Images like this are not going to look well.

Here we apply the same styles, but this time the img element has a defined width and height attributes. Just try to resize the browser window to see what will happen:

Live demo

The easiest way for avoiding the problem is not to define width and height attributes in HTML for images. But defining these attributes for images is not pointless thing, especially when they show actual dimensions of images. Google Developers recommend to define them, because of performance reasons as it can improve rendering speed in the browser.

Whether to define or not is up to you. So, if you have decided to define them you will need to improve the styles above; all you need to do is to add to them height: auto;. Finally the styles look like this:

img {
  max-width: 100%;
  height: auto;
}

Live demo

These styles override the defined height attribute in HTML and allow the image to change its height proportionally to its width.

Browser support

IE7 resizes an image proportionally regardless whether or not there are any defined dimension attributes in HTML, even without using height: auto; in the styles.

To make IE8 resize an image properly, you need to provide width in addition to height: auto;. Fortunately width: auto; is a trick which doesn't cause any problems in the other browsers. If you want these things to work in IE8 just use these styles:

img {
  width: auto;
  max-width: 100%;
  height: auto;
}

Live demo


 

Read also

CSS3: media queries

CSS3: media queries

Discussion (total 1 comments)

Junaid Ahmed
February 09, 2014 at 10:13 am
Just Awesome Trick and great way of tut. thanks

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation