图片外层 用一个div包裹着
以长边为标准,短边自适应:
div {
display: flex;
justify-content: center;
align-items: center;
width: 定值;
height: 定值;
}
img {
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
以短边为标准,长边中间截断:
object-fit: cover
object-fit 控制内容在框中的填充方式
由以下的一个单独关键字来指定
none: 保持原有尺寸,不会进行缩放
contain: 按比例缩放图片,刚好在容器盒子里完全展示|
cover: 宽高按比例缩放,超出容器的部分居中裁剪
fill: 平铺满容器,宽高会被拉伸
scale-down: 取none和contain中生成的对象尺寸小的那个