css 设置＜img＞适应指定宽高，保持原始比例展示

封面图 • 2025-09-23 • 互联网

在 CSS 中，可以通过设置 `max-width` 和 `max-height` 属性来让 `<img>` 元素适应指定的宽高，并且保持原始的比例。同时，使用 `object-fit` 属性可以控制图片如何填充容器。

以下是一个示例代码：

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Scaling</title>
    <style>
        .image-container {
            width: 300px; /* 指定容器宽度 */
            height: 200px; /* 指定容器高度 */
            overflow: hidden; /* 防止图片超出容器 */
        }

img {
            max-width: 100%; /* 图片最大宽度为容器宽度 */
            max-height: 100%; /* 图片最大高度为容器高度 */
            object-fit: contain; /* 保持图片原始比例 */
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img src="your-image.jpg" alt="Example Image">
    </div>
</body>
</html>
```

### 解释：
1. **`.image-container`**：这是图片的容器，设置了固定的宽度和高度。
2. **`max-width: 100%` 和 `max-height: 100%`**：确保图片不会超过容器的宽度和高度。
3. **`object-fit: contain`**：保持图片的原始比例，图片会缩放以适应容器，但不会被裁剪。

### 其他 `object-fit` 值：
- `cover`：图片会缩放以覆盖整个容器，可能会裁剪部分图片。
- `fill`：图片会被拉伸以完全填满容器，不保持比例。
- `none`：图片大小不变，保持原始尺寸。
- `scale-down`：根据需要选择 `none` 或 `contain`。

通过这种方式，你可以轻松地让图片适应指定的宽高并保持原始比例。