29 of 133 menu

The width attribute

The width attribute specifies the width of the image, which is specified by the img tag.

Currently, this attribute is only allowed to be used for images, iframe, video and some other tags.

It is allowed to specify values ​​in pixels or percentages. If the size is specified in percentages, they will be taken from the parent's width. If the size is specified in pixels, units of measurement are not specified.

If neither width nor height is specified for the image, the image will have its real size. If the height is specified, the image will become the specified height, and its width will be adjusted so that its proportions are not distorted. If only the width is specified, the image will be adjusted in height in the same way to preserve the proportions. If both the width and height are specified, the image proportions may be distorted (or may not, as you can guess). If the width or height (or both together) is greater than the real one, the image will increase in size, but will lose quality.

It is recommended to set the width and height of images in attributes - in this case, the browser will load images faster - it does not need to calculate the size of each image after receiving it.

It is not recommended to reduce the actual dimensions of the image without necessity. For example, the actual size of the image is 1000 by 1000 pixels, and you set its width to 100px. In this case, the image on the screen will look like 100 pixels, but will be the size of a whole thousand and, accordingly, will load much longer.

See examples of work here: tag img.

See also

  • attribute height,
    which sets the height
  • property width,
    which sets the width of the elements
idpltrbyhy