Size and Scaling - HTML

You can specify the size of an image by using the height and width attributes of the <img> tag. These attributes accept pixel and percentage values, allowing you to specify the exact size of an image or a size relative to the current size of the browser window.

Tip: Get in the habit of always using the width and height attributes with your <img> tags. These attributes allow the user agent to reserve the correct amount of space for the image while it continues to render the rest of the document. Without these attributes, the user agent must wait for the image to be loaded before continuing to load the rest of the document.
For example, suppose that you had a large, high-resolution image, but wanted to display a smaller version. Using the pixel values of the sizing attributes, you can specify a custom size of the larger image. For example, consider the following code and the resulting display in Figure:

Using percentage values, you can display an image at any percentage of its normal size.

Using percentage values, you can display an image at any percentage of its normal size.

Note: It is important to use both the correct height and width when specifying image dimensions in an <img> tag. If you change the proportions of the figure (by specifying a wrong width or height), you will end up with a funhouse mirror effect—the image will be stretched or shrunk in one dimension. Sometimes this can be used for effect, but usually it is accidental.

Also note that you can specify only one of the dimensions and have the user agent automatically figure out the other. However, the user agent must then wait for the entire image to load before progressing with rendering the rest of the page, so it is always better to specify both dimensions. Image size attributes should not be used as a substitute for an appropriately sized graphic. If you need a different sized image, create the appropriate size in an image editor and use the new image instead. Although the width and height attributes can be used to display an image smaller than it actually is, the user agent must still download the entire image—the user agent must then scale the image accordingly.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics