HTML img width Image width

 The width setting of HTML img image can be handled through the width attribute. Usually width is also matched with height to determine the size of the image. Only width is used, and the browser will maintain the aspect ratio of the image. However, if the height attribute is added, The picture ratio may be changed.

HTML img width width syntax example

<img src="Image URL" width="width value">

HTML img width can only use numbers or percentages. Here are a few examples for reference. We use this original image to make changes.



Example 1: Set img width to 200. (Syntax reference: <img src="picture URL" width="200">)



↑ The original picture width is 300, and the picture is forced to be reduced proportionally by width=200.

Example 2: Set img width to 200 and height to 100. (Syntax reference: <img src="image URL" width="200" height="100">)



↑ This time we added the height=100 specification, you can see that the image ratio is different!

Example 3: Set the img width to 50%. (Syntax reference: <img src="image URL" width="50%">



) ↑ The width is set to 50%, so that the picture will display 50% of the width of the page.

Although no matter what the original size of the picture is, the width can be specified by width to meet the layout specifications, but it is not recommended to use this method completely. The more correct way is to use drawing software (such as GIMP ) Design the width and height, or use PHP to reduce the image file when uploading.

If you let netizens look at the product catalog, and each small picture in the product catalog has not been shrunk first, only use img width to limit the original large picture to a small size, which will waste a lot of bandwidth, and when the bandwidth of the netizen is compared When I was young (such as using mobile phones to browse the Internet), my reading speed would be slower.