To set the image size in CSS, you can use the following attributes: 1. width: Set the width of the image. 2. height: Set the height of the picture. 3. max-width and max-height: Maintain the aspect ratio of the image.
How to set the size of an image in CSS
In order to set the size of an image in CSS, you can use the following Properties:
Set fixed size
To set a fixed size image, you can use the width
and height
attributes respectively :
<code class="css">img { width: 200px; height: 150px; }</code>
Set relative size
You can also use percentage values to set the relative size of the image so that it fits the size of the container:
<code class="css">img { width: 100%; height: auto; }</code>
Maintain the aspect ratio of the image
To maintain the aspect ratio of the image, you can use the max-width
and max-height
attributes:
<code class="css">img { max-width: 100%; max-height: 100%; }</code>
Example
The following example shows how to use these properties to set images of different sizes:
<code class="css">/* 设置固定大小的图片 */ img.fixed { width: 200px; height: 150px; } /* 设置相对大小的图片 */ img.relative { width: 100%; height: auto; } /* 保持图片宽高比 */ img.aspect-ratio { max-width: 100%; max-height: 100%; }</code>
The above is the detailed content of How to set the size of img image in css. For more information, please follow other related articles on the PHP Chinese website!