css3图片防止变形
2021-02-09 01:16
标签：tps 可见 它的 高度 定位 bfd 参数 scale 变形 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。 之前我们大多数用的 你说图片不是图片，搞笑呢。。 客官，来啦来啦！！ 使用的过程中用的cover比较多一些。 当然一些背景图也可通过 background-size:contain | cover 来避免对图片造成的压缩或者拉伸。 object-position(使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。) 也就是说：属性可以控制图片的展示位置，比如下图有很多留白，如果我们想让最主要的内容展示出来，就可以用这个属性控制图片位置；（注意：这些定位方式允许被替换元素的对象被定位到内容框外部） object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。 其默认值为“50% 50%”(center)。 sorry ，not for IE 扫上面图加群喽 css3图片防止变形 标签：tps 可见 它的 高度 定位 bfd 参数 scale 变形 原文地址：https://www.cnblogs.com/bbqq1314/p/13064736.html1.object-fit
大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。
fill: 默认值,和未设置一样。使图片拉伸填满整个容器, 不保证保持原有的比例。
contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。
由于是保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白
cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。(图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续‘生长‘,
直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪)
none: 保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。
scale-down: “降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个
img {
object-fit:cover
}
2.object-position
3兼容
last but not least