object-fit属性-详解

### 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].