Contact Derick Montague at letschat@beyondhyper.com

Fluid Images with Height and Width Attributes

If you’ve read anything about responsive web design, you’ve heard about fluid images. Fluid images are achieved by setting the max-width property value for all img tags to 100%, which constrains the width of the image to the width of its container. All information that has been pushed to the forefront of the design industry by the Unstoppable Robot Ninja, a.k.a. Ethan Marcotte.

One of the first things I noticed was the lack of width and height attributes being set on the img tag. We’ve always been told that when setting height and width attributes our images reserve the space they need to occupy, which results in a better user experience. When you add a value for the height attribute, the image will be stretched when the container width shrinks below the set width.

Many of the fixes for this rely on JavaScript, which is a bit heavy handed when all you need to do is to set the height property value to auto in the img selector declaration block.

Code

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

Leave a Reply

Your email address will not be published. Required fields are marked *


*
*