可保图片不变形的object-fit

  Object-fit

  我们有时候浏览一些网站的时候,偶尔会遇到这种情况:

 

 

   明显它喵的形变了,尤其是这种这么业余的失误,还是出现在一个专门做图片的网站上。

  产生这种现象的原因是:图片写了固定的宽高,这个宽高形成了一个固定的比例,然而图片本身不可能总是按照你规定的比例上传上来,只要比例有一点不对,就会产生拉伸形变。

  所以我们需要找到一个方式,来应对这种无法避免的情况,这个属性就是CSS中的object-fit属性。

  object-fit用于规定可替换元素(最常见的如video,img,iframe)应该如何适应有其宽高所界定的“无形的框”。下面通过一个简单的示例来说明一下object-fit的妙用:

  

 

 

(图片此时宽400px,高400px,背景为黑色,没加object-fit)

 

 

   当object-fit属性为contain时,表示图片将不形变地最大限度地完整显示在无形框内,且会居中显示。也就是说,图片的宽和高至少有一个会刚好碰到边界,效果如下:

  

 

 

(object-fit: contain)

 

  第二个属性则是cover,它表示图片将在保持自身比例不变的前提下填充整个无形框,换言之,它会牺牲掉一部分边缘图片的内容,如果边缘的图片内容不太重要,可以考虑这个属性,即只保留中心内容:

  

 

(object-fit:cover)

 

  第三个属性则是fill,这个属性就是个辣鸡,跟图片不加object-fit的显示效果一毛一样,不知道还留着这个属性干啥,其效果如下:

 

(object-fit: fill)

 

  第四个属性是none,这个属性可就夸张了,它会按照图片的原始尺寸居中在无形框中显示,所以如果图片很大的话,显示的就会是图片中心的“冰山一角”,慎用!其效果如下:

 

(object-fit: none)

 

  最后一个属性是scale-down,它是这样的: 如果图片很大,大过无形框,那么它就跟contain属性是一样的效果;如果图片很小,小于无形框,那么它就跟none属性是一样的效果,这个属性用的并不多。

  当然你会想到background-size也有类似的属性可以设置,但有些场景就是不适合用background,比如需要一个图片搭配一行文字组成一个卡片,就是因为图片是占位的,所以它与span等标签组合才会如此方便,但是background就不合适,定位太麻烦了。

  用的最多的是contain和cover属性。

  

 

 

 

  

posted @ 2019-11-16 13:27  陌上兮月  阅读(...)  评论(...编辑  收藏