介绍"Onbject-fit CSS"

Onbject-fit CSS 是一种属性，用于设置一个图片元素的大小及填充方式。这种属性可以将包含图片的元素调整为任意大小，并将图片缩放以适应元素的大小和比例，不必剪裁或拉伸图片。

使用"Onbject-fit CSS"

语法

object-fit: fill|contain|cover|none|scale-down;

属性

• fill : 填充整个内容区域，不维持图片的宽高比例;
• contain : 等比例缩放图片，直到它可以适应区域内，保持宽高比例;
• cover : 等比例缩放图片，直到它可以覆盖整个区域，要么顶部或者底部会被裁剪，保持宽高比例;
• none: 默认值，图片将按其原有尺寸显示，不做适应或拉伸；
• scale-down: 在fill和contain之间选择适当的值，以保持图片的宽高比例。

实例

HTML：

<div class="image">
  <img src="sample.jpg" alt="Sample Image">
</div>

CSS:

.image {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

以上代码将调整一个包含图片的元素大小为 300px × 200px，并将图片缩放以适合它，覆盖整个区域，底部/顶部会被裁剪掉。

结论

Onbject-fit 是一个非常有用的属性，可以使开发人员轻松地调整图片的大小和样式，同时保持图片的宽高比例不变。它对于制作响应式图片、用户界面设计和图片处理非常有用。