css图片大小怎么调整

/* 使用 CSS 调整图片大小的示例代码 */

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

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

/* 方法3：使用 max-width 和 max-height 来限制最大尺寸 */
img {
    max-width: 100%; /* 图片最大宽度为父元素宽度的100% */
    max-height: 100%; /* 图片最大高度为父元素高度的100% */
    height: auto; /* 自动调整高度以保持宽高比 */
}

/* 方法4：使用 object-fit 属性来控制图片如何适应其容器 */
img {
    width: 300px;
    height: 200px;
    object-fit: cover; /* 图片将覆盖整个容器，可能会裁剪 */
}

解释说明：

• 方法1：直接指定图片的宽度和高度。这种方式简单直接，但可能会破坏图片的宽高比。
• 方法2：使用百分比设置宽度，并让高度自动调整以保持图片的宽高比。这种方式适合响应式设计。
• 方法3：使用 max-width 和 max-height 来限制图片的最大尺寸，确保图片不会超出其容器。
• 方法4：使用 object-fit 属性可以更好地控制图片如何适应其容器，常用值有 cover（覆盖整个容器，可能会裁剪）和 contain（完全显示图片，可能会留白）。