object-fit:
fill: 默认值,和未设置一样。会将图片压缩拉伸
contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。例如上面,图片的高度达到父容器高度后,宽度按照比例生成,导致左右留白
cover: 和contain不一样,cover是以最大值为规定的。例如上图,图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续’生长’,直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪
none: 顾名思义宽高对图片不起作用,即使设置了固定的宽高,图片仍然以原始大小展现,但是超出设置的值会被遮挡
scale-down: 以contain或none图片最小尺寸为标准.
原文:https://www.cnblogs.com/soyxiaobi/p/9640729.html
图片固定大小,解决伸缩
最新推荐文章于 2023-03-20 21:24:28 发布