业务背景
实现一个轮播图,轮播区域宽度自适应,高度100px; 图片分辨率由用户上传获得。为了让图片不变形,需要对图片进行居中裁剪。
实现
使用css的属性 object-fit: cover
原理
css可替换元素
展示效果不是由css决定,是一种外部对象, 它们外观的渲染独立于css
css不会影响到其中内容的展示,只能改变它的位置,和内容在框里的位置或者定位方式。
例如
object-fit 控制内容在框中的填充方式
类似于background-size;
由以下的一个单独关键字来指定
属性值 | 效果 |
---|---|
none | 保持原有尺寸,不会进行缩放 |
contain | 按比例缩放图片,刚好在容器盒子里完全展示| |
cover | 宽高按比例缩放,超出容器的部分居中裁剪 |
fill | 平铺满容器,宽高会被拉伸 |
scale-down | 取none和c |