Change image size in html

If no dimensions are specified for the image, the browser will display it in its natural size, but it will not be able to determine the size until the image is loaded and analyzed. In the meantime, the browser probably already downloaded all the HTML markup and text, and images will appear in their place only after they are downloaded. To post images after analyzing their size, the browser can rebuild the markup again, which may not be acceptable if the user has already started reading the text on the page. In order for the browser to reserve the space of the correct size in advance to display the image, you can use the width and height attributes, which specify the width and height of the image in pixels without specifying the unit of measurement.

If the width and height attributes contain values that do not match the natural size of the image, the browser will scale the image to the specified dimensions. However, you should usually avoid resizing the image in this way. When the browser scales the image in a larger or smaller direction from its natural size, the image may appear less clearly or more sharply. Ideally, the width and height attributes should be specified in natural sizes, and to increase or decrease the images, it is better to use a graphical editor.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Page title</title>
  </head>
  <body>

    <p>
      <img src="flower.png" width="40" height="40">
      <img src="flower.png" width="80" height="80">
      <img src="flower.png" width="120" height="120">
    </p>
	
    <p>
      You can make the image larger or smaller by changing the values of the width and height
	  attributes. But with a very large increase in the quality of the image may become worse.
    </p>

  </body>
</html>
Try it »

If you decide to change the size of the image using the width and height attributes, you should observe the proportions between the width and height of the image. Changing the proportions of the size of the image will lead to its deformation.

Copying materials from this site is possible only with the permission of the site administration and
when you specify a direct active link to the source.
2011 - 2021 © puzzleweb.ru

puzinfo@puzzleweb.ru | ruen