How to set the size of img image in css

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:

• width: Set the width of the image.
• height: Set the height of the image.

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!