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属性。

  

  

可保图片不变形的object-fit的更多相关文章

  1. WPF图片拖拉变形、合成

    使用WPF的装饰器(Adorner)实现图片拖拉变形,DrawingVisual高保真合成图片.效果如下: 源码:https://gitee.com/orchis/ImageFotoMix.git

  2. css 设置头像图片不变形

    css 设置头像图片不变形 在样式中加 object-fit: cover 就可以了

  3. C# 制作屏保(图片位置随机变化)

    最近无所事事,闲着无聊,在网上翻看资料时碰巧看到了屏保制作,根据大神的思路也理解到屏保也不是很难.因此根据我自己的理解,动手谢了一个屏保. 首先,打开VS2010创建一个Windows窗体应用程序,名 ...

  4. iOS UIImage UIImageView 展示图片 不变形 处理

    展示图片 时候 固定 了 imageView  的大小  图片 也裁剪了 尽量保持比例 可是 还是失真 变形了 这张图 ui 要求展示的UIimageView 大小 是固定 的  ,传过来的 图片 是 ...

  5. css技术之用最高和最宽的限制“max-height和max-width”做图片同比例缩放,达到图片不变形目的,做出批量打印图片功能,页面打印“window.print()”

    一.简介 他们是为流而生的,像width/height这种定死的砖头式布局,min-width/max-width就没有存在的意义 ,min-width/max-width一定是自适应布局或流体布局中 ...

  6. css3图片防止变形

    1.object-fit 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐. 之前我们大多数用的 大多数都是利用background-size: cover 来避免对图片造 ...

  7. iOS:图片拉伸不变形技巧

    方法: 假设图片为60*24 CGFloat top = image.height*0.5-1; // 顶端盖高度 CGFloat bottom = top ; // 底端盖高度 CGFloat le ...

  8. 微信小程序图片宽100%显示并且不变形

    <view class="meiti" style="background-color:red;"> <image src="htt ...

  9. 了解JS压缩图片,这一篇就够了

    前言 公司的移动端业务需要在用户上传图片是由前端压缩图片大小,再上传到服务器,这样可以减少移动端上行流量,减少用户上传等待时长,优化用户体验. 插播一下,本文案例已整理成插件,已上传npm ,可通过 ...

随机推荐

  1. Redis Sentinel(哨兵核心机制) 初步深入

    ##### 1.Redis 的 Sentinel 系统用于管理多个 Redis 服务 该系统执行以下三个任务:  1.监控(Monitoring): Sentinel 会不断地检查你的主服务器和从服务 ...

  2. springboot 自定义LocaleResolver切换语言

    springboot 自定义LocaleResolver切换语言 我们在做项目的时候,往往有很多项目需要根据用户的需要来切换不同的语言,使用国际化就可以轻松解决. 我们可以自定义springboor中 ...

  3. apply、bind、call方法的作用与区别

    js中call.apply.bind方法的作用和区别 1. call方法 作用:专门用于修改方法内部的 this 指向 格式:xxx.call( 对象名, 参数1, 参数2 , ...);.即:将 x ...

  4. numpy.random.rand

    numpy.random.rand(d0,d1,...,dn ) 给定形状中的随机值. 创建一个给定形状的数组,并用统一分布的随机样本填充它.[0, 1) 参数: d0,d1,...,dn:int,可 ...

  5. C 自删除技术---批处理方式

    #include<stdio.h> #include<windows.h>#pragma comment(linker, "/subsystem:\"win ...

  6. python 2.x中的中文

    先不管一大堆的中文显示的原理,在这里记录下正确显示中文的方式,便于以后的查阅和深入学习. 方法1 a = {} a["哈哈哈"] = "啦啦啦啦啦啦啦" s1 ...

  7. python中函数定义与调用顺序问题

    def main(): try: mtd(3) except Exception as e: print("程序出现异常:", e) mtd(3) def mtd(a): if a ...

  8. Uipath 浏览器页面最大化和最小化

    文章来源东京IT青年前线http://www.rpatokyo.com/ Uipath 浏览器页面最大化和最小化   浏览器在关闭时会自动记忆上次浏览器关闭时窗口的小,下次再次会以同样的大小打开.机器 ...

  9. 【python数据分析实战】电影票房数据分析(二)数据可视化

    目录 图1 每年的月票房走势图 图2 年票房总值.上映影片总数及观影人次 图3 单片总票房及日均票房 图4 单片票房及上映月份关系图 在上一部分<[python数据分析实战]电影票房数据分析(一 ...

  10. lnmp安装mysql

    lnmp安装mysql 下载lnmp wget http://soft.vpser.net/lnmp/lnmp1.6.tar.gz 解压 tar ‐xf lnmp1..tar.gz 安装数据库 ./i ...