轮播图大小自适应

none则图片保持原大小
fill 会变形
contain 填不满,但是不变性
cover 裁剪后填满,图片会丢失边缘内容,但是保留主体
scale-down 和contain挺像的

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

其中:object-fit的属性值有:

  • fill - 默认值。调整替换后的内容大小,以填充元素的内容框。如有必要,将拉伸或挤压物体以适应该对象。
  • contain - 缩放替换后的内容以保持其纵横比,同时将其放入元素的内容框。
  • cover - 调整替换内容的大小,以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
  • none - 不对替换的内容调整大小。
  • scale-down - 调整内容大小就像没有指定内容或包含内容一样(将导致较小的具体对象尺寸)

猜你喜欢

转载自blog.csdn.net/Salt_NaCl/article/details/129301564