How to set the size of img image in css

下次还敢
Release: 2024-04-26 11:48:13
Original
558 people have browsed it

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 img image in css

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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!

Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!