Setting the length and width of an image with HTML: 4 steps (with images)

Table of contents:

Setting the length and width of an image with HTML: 4 steps (with images)
Setting the length and width of an image with HTML: 4 steps (with images)
Anonim

This wikiHow teaches you how to set the height and width of an image using HTML (HyperText Markup Language).

  • The "width" indicates the width of an image in pixels.
  • The "height" indicates the height of an image in pixels.
  • In HTML 4.01, height can be defined in pixels or in percentages. In HTML5, the value must be in pixels.

Steps

Set Image Width and Height Using HTML Step 1

Step 1. Edit the file whose image you want to show

for example: default.html Set Image Width and Height Using HTML Step 2

Step 2. Add this line to your script

  • src

    is the file path to your image.
  • alt

    is the label you give your image.

Set Image Width and Height Using HTML Step 3

Step 3. Replace '

height

' and '

width

' as you wish, for example

height="19"

Set Image Width and Height Using HTML Step 4

Step 4. Save the file and open the file with any browser to see the effect

The 'width' attribute is supported in all major browsers such as Google Chrome, Safari, Mozilla Firefox, Opera, Internet Explorer etc.

Tips

  • Always specify the height and width attributes for images. If the height and width are set, the space needed for the image will be reserved when the page loads. However, without these attributes, the browser does not know the size of the image and cannot reserve suitable space for it. The effect of this is that the page layout changes during loading (while the images are loaded).
  • Shrinking a large image by adjusting its height and width forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before placing it on a page.

Popular by topic