CSS object-fit 属性允许图像适应 宽高比

网站。为了适应响应式标题图像效果，所有网站上的大多数图像都使用CSS background-imgage，然后使用background-size:cover调整图像。 ，保持图像的长宽比，不进行裁剪或压缩，但是搜索引擎用这种方法不能很好的抓取页面图像，特别是如果首页没有img图像风格，则很难在搜索结果。有影响。

所以为了优化这个细节，子凡决定采用预先缓存img图像标签的方法。那么如何解决宽高比图像的适配，就需要直接使用CSS对象对齐属性。例如：object-fit: cover;

1
2
3
4

//img 图片适配
img{
  object-fit: cover;
}

object-fit CSS 属性指定可替换元素的内容如何适合由所使用的高度和宽度定义的字段。

使用对象位置属性可以切换被替换元素的内容对象在元素框中的对齐方式。

语法

对象匹配属性由以下值中的单个关键字定义。

Values

contains：替换的内容将在填充元素的内容框时缩放以保留其内容。整个对象在填充框时保留其长宽比，因此如果框与框的框不匹配，则该对象将具有“黑边”。

cover：替换的内容填充元素的整个内容框，同时保留其内容。如果对象的布局与内容框不匹配，则对象将被剪裁以适合内容框。

fill：替换的内容恰好填充元素的内容框。整个物体完全填充了这个区域。如果对象的尺寸与内容框的尺寸不匹配，则拉伸该对象以适合内容框。

无：替换后的内容保持原来的大小。

最小化：内容的大小与无或包含相同，以对象大小较小者为准。

文章来自雷雪博客

本文链接：https://zhangzifan.com/css-object-fit.html