css3图片防止变形

1.object-fit

由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。 之前我们大多数用的

大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。

fill: 默认值,和未设置一样。使图片拉伸填满整个容器, 不保证保持原有的比例。

contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。
由于是保证整个图片都可以出现在容器中。因此，此参数可能会在容器内留下空白

cover: “覆盖”。保持原有尺寸比例缩放。宽度和高度至少有一个和容器一致（尺寸小的一致）。因此，此参数可能会让图片部分区域不可见。(图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续'生长',
直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪)


none: 保持原有尺寸比例。同时保持图片原始尺寸大小。多出的部分隐藏。

scale-down: “降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个

你说图片不是图片，搞笑呢。。

客官，来啦来啦！！

 

 

 

 

使用的过程中用的cover比较多一些。

img {
    object-fit:cover
}

当然一些背景图也可通过 background-size:contain | cover 来避免对图片造成的压缩或者拉伸。

2.object-position

object-position(使用 1 到 4 个值来定义该元素在它所处的二维平面中的定位。可以使用相对或绝对偏移。) 也就是说：属性可以控制图片的展示位置，比如下图有很多留白，如果我们想让最主要的内容展示出来，就可以用这个属性控制图片位置；（注意：这些定位方式允许被替换元素的对象被定位到内容框外部） object-position属性决定了它的盒子里面替换元素的对齐方式。其取值和CSS中background-position属性取值一样。 其默认值为“50% 50%”(center)。

3兼容

sorry ，not for IE

last but not least

扫上面图加群喽