Img Height In HTML: How Not To Use The Height Attribute

Attribute of

HTML Tags Guide To Adding Images To Your Web Documents

What does Img Height In HTML: How Not To Use The Height Attribute do?

Identifies the intrinsic height of an image file, in CSS pixels.

Code Example

<img src="/wp-content/uploads/flamingo.jpg" width="640" height="425">

How not to use the height attribute

Before CSS became the standard way to control web page layout, it was common to include inline styling information. Under that paradigm, it was common to include sizing information along with the markup using the width and height attributes. This method will still work on most browsers today, but it is deprecated and should not be done.

<!-- DEPRECATED. May work on most browsers, but results will vary. -->  <img src="/wp-content/uploads/flamingo.jpg" width="320" height="213"> 

The proper way to control image size is to use CSS.

#half-size-flamingo {  width: 320px;  height: auto; } 

<img src="/wp-content/uploads/flamingo.jpg" id="half-size-flamingo"> 

#half-size-flamingo { width: 320px; height: auto; }

Of course, specifying the exact width via CSS isn’t usually a good idea, either. The responsive way to do this would be to specify a percentage-width based on the container. If you want to place text next to the image, you’ll need to float the image to the left or the right. If you want the image to stand alone between paragraphs of text, use a larger image and set the width to 100%.

img.with-text {  float: right;  max-width: 50%;  height: auto; } .clearfix:after {   content: " ";    visibility: hidden;   display: block;   height: 0;   clear: both; } 

<div class="clearfix"> <img src="/wp-content/uploads/flamingo.jpg" class="with-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur sodales orci in bibendum. Integer luctus libero ac diam efficitur, eget condimentum erat vehicula. </div> 

img.with-text { float: right; max-width: 50%; height: auto; }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur sodales orci in bibendum. Integer luctus libero ac diam efficitur, eget condimentum erat vehicula.

img.between-text {  width: 100%;  height: auto;  display: block; } 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras efficitur tortor sit amet nulla ultricies interdum. Suspendisse quis leo non odio vehicula suscipit fermentum ornare lectus.</p> <img src="/wp-content/uploads/flamingo.jpg" class="between-text"> <p>Fusce vestibulum diam vel orci vestibulum, non tristique ipsum consectetur. Pellentesque molestie nunc ullamcorper, suscipit velit non, porta magna. Fusce porttitor lacus felis, eget placerat magna vestibulum a. Nulla facilisi.</p> 

The Proper Use of height

You can find many web design and CSS tutorials advising against the use of the heightattribute, some even claiming that the attribute is deprecated in HTML5. This is actually not the case. The height attribute is still a valid part of the current HTML specification, but you have to use it correctly. The purpose of the height (and the width attribute as well) is to inform the browser of the actual size of the image as it appears in the file — not as it is intended to appear in the design of the page.

Why indicate the height?

Typically, with modern web design layout, you do not specify the height of an image or other element. The rendered, display height is a result of the width. (Hence the prevalent use of height: auto; in CSS layouts). For example, given an image with an intrinsic size of 200 px by 100 px (2:1 aspect ratio), if the rendered width is 150px, the rendered height will be 75%. Why does this matter? The browser doesn’t know what the intrinsic size of an image is until it has downloaded and inspected it. So, until that happens, it doesn’t know how much space to allot to it on page. Depending on the way the layout is structured, it can often (not always) figure out the width, but it won’t be able to figure out the rendered height without information on the image’s actual proportions. This causes an annoying, glitchy page jump when the other elements on the page move to accommodate each image as it loads. On a page with a lot of images, this can be a real problem. The simple solution is to include information about an image’s height and width in the markup. You still need to specify the display size in the CSS, but providing information about the file will help browsers render the page faster and more accurately.

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

<img src="/wp-content/uploads/very-large-flamingo.jpg" width="1280" height="850"> 

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

For more information about indicating the intrinsic size of an image, see our documentation on the image width attribute.

Adam Wood

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for height

All	All	All	All	All	All