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

最新推荐文章于 2024-08-14 21:15:03 发布

dalongee

最新推荐文章于 2024-08-14 21:15:03 发布

阅读量128

点赞数

文章标签： css3 前端 javascript

本文链接：https://blog.csdn.net/dalongee/article/details/131613381

版权

文章介绍了CSS3的object-fit属性，包括fill、contain、cover、scale-down和none等不同值的效果，帮助开发者理解和使用这些属性来控制图片在容器中的显示方式，以适应不同的布局需求。

摘要由CSDN通过智能技术生成

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

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;
}