CSS3 object-fit属性 图片显示裁剪 常用封装

CSS3 object-fit属性 图片显示裁剪 常用封装

观看大神文档

链接: https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/

代码复制可用

/* object-fit: fill; 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 */
.img-fit-fill{
	object-fit: fill;
}

/* object-fit: contain; 保持原有尺寸比例。内容被缩放。 */
.img-fit-contain{
	object-fit: contain;
}

/* object-fit: cover; 保持原有尺寸比例。但部分内容可能被剪切。 */
.img-fit-cover{
	object-fit: cover;
}

/* object-fit: scale-down; 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 */
.img-fit-down{
	object-fit: scale-down;
}

/* object-fit: none; 保留原有元素内容的长度和宽度，也就是说内容不会被重置。 */
.img-fit-none{
	object-fit: none;
}