css img的object-fit
时间: 2025-06-30 12:46:35 浏览: 9
### CSS `img` 标签中的 `object-fit` 属性详解
#### 定义与作用
`object-fit` 是一个 CSS 属性,用于指定可替换元素(如 `<img>`、`<video>` 或 `<object>`)的内容如何适应其容器框的尺寸[^3]。
#### 基本语法
```css
img {
object-fit: cover | contain | fill | none | scale-down;
}
```
#### 取值说明
- **cover**: 图片会缩放以填充整个容器区域。如果宽高比例不同,则部分内容会被裁剪掉。
- **contain**: 图像保持原始的比例并调整大小以适合容器内部;图像不会被裁切,可能会有空白空间存在。
- **fill**: 默认行为,拉伸图片来完全覆盖目标矩形区,不考虑纵横比。
- **none**: 保留原图的实际尺寸,即使它溢出了容器边界也不会改变。
- **scale-down**: 如果源对象小于容器则按原样显示,否则如同设置为 `contain` 处理。
#### 实际应用案例
##### HTML 结构
```html
<img src="example.jpg" alt="示例图片" class="responsive-img">
```
##### CSS 样式定义
```css
.responsive-img {
width: 200px;
height: 400px;
}
/* 使用不同的 object-fit 效果 */
.cover-example {
object-fit: cover; /* 裁剪以填满 */
}
.contain-example {
object-fit: contain; /* 缩放到合适 */
}
.fill-example {
object-fit: fill; /* 不顾比例拉伸 */
}
.none-example {
object-fit: none; /* 维持原有尺寸 */
}
.scale-down-example {
object-fit: scale-down; /* 尽可能缩小而不变形 */
}
```
通过上述代码片段可以直观地看到各种 `object-fit` 设置下图片的表现形式差异。这有助于开发者根据实际需求选择最合适的样式效果[^1][^2].
阅读全文
相关推荐


















