object-fit
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
img {
width: 200px;
height: 400px;
object-fit: cover;
}
值 | 描述 尝试一下 |
---|---|
fill | 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。 |
contain | 保持原有尺寸比例。内容被缩放。 |
cover | 保持原有尺寸比例。但部分内容可能被剪切。 |
none | 保留原有元素内容的长度和宽度,也就是说内容不会被重置。 |
scale-down | 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小 |
initial | 设置为默认值 |
inherit | 从该元素的父元素继承属性。 |
微信小程序
官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/image.html
在微信小程序中,object-fit无效。原因小程序不支持此属性,官方提供了自己的方法。mode属性
<image src="" mode="aspectFill"/>
imgbox image {
width: 100px;
height: 100px;
}
合法值 | 说明 |
---|---|
scaleToFill | 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
aspectFit | 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。 |
aspectFill | 缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。 |
widthFix | 缩放模式,宽度不变,高度自动变化,保持原图宽高比不变 |
heightFix | 缩放模式,高度不变,宽度自动变化,保持原图宽高比不变 |
top | 裁剪模式,不缩放图片,只显示图片的顶部区域 |
bottom | 裁剪模式,不缩放图片,只显示图片的底部区域 |
center | 裁剪模式,不缩放图片,只显示图片的中间区域 |
left | 裁剪模式,不缩放图片,只显示图片的左边区域 |
right | 裁剪模式,不缩放图片,只显示图片的右边区域 |
top left | 裁剪模式,不缩放图片,只显示图片的左上边区域 |
top right | 裁剪模式,不缩放图片,只显示图片的右上边区域 |
bottom left | 裁剪模式,不缩放图片,只显示图片的左下边区域 |
bottom right | 裁剪模式,不缩放图片,只显示图片的右下边区域 |