css设置图片大小

/* 设置图片大小的几种常见方法 */

/* 方法一：直接设置宽高 */
img {
    width: 200px; /* 设置图片宽度为200像素 */
    height: 150px; /* 设置图片高度为150像素 */
}

/* 方法二：使用百分比 */
img {
    width: 50%; /* 图片宽度为父元素宽度的50% */
    height: auto; /* 高度自动调整以保持比例 */
}

/* 方法三：使用最大宽度和高度 */
img {
    max-width: 100%; /* 图片最大宽度为父元素宽度的100% */
    max-height: 100%; /* 图片最大高度为父元素高度的100% */
    height: auto; /* 保持宽高比例 */
}

/* 方法四：使用 object-fit 属性 */
img {
    width: 300px;
    height: 200px;
    object-fit: cover; /* 裁剪图片以适应容器，保持比例 */
}

解释说明：

1. 直接设置宽高：通过 width 和 height 直接指定图片的具体尺寸。
2. 使用百分比：通过 width 和 height 的百分比值，使图片根据父元素的尺寸进行缩放。
3. 使用最大宽度和高度：通过 max-width 和 max-height 来限制图片的最大尺寸，同时使用 height: auto 来保持图片的宽高比例。
4. 使用 object-fit 属性：通过 object-fit 可以控制图片如何适应其容器，常见的值有 cover（裁剪）和 contain（包含）。