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. Elasticsearch Java API 很全的整理

    Elasticsearch 的API 分为 REST Client API(http请求形式)以及 transportClient API两种.相比来说transportClient API效率更高, ...

  2. nm 命令能够显示目标文件中重载函数的名字改变(C++)

    #include <stdio.h> #include <iostream> using std::cout; using std::endl; //这里的两个不同的add函数 ...

  3. Beautiful Soup 4.2.0 文档(一)

    Beautiful Soup 是一个可以从HTML或XML文件中提取数据的Python库.它能够通过你喜欢的转换器实现惯用的文档导航,查找,修改文档的方式.Beautiful Soup会帮你节省数小时 ...

  4. 自学web前端达到什么水平,才能满足求职的标准?

    大多数野生程序员最棘手的问题就是如何依靠技术解决温饱,通俗来讲就是技术折现的问题. 如果是单纯出于兴趣,或者只是为了突击某一阶段或者某一项目技术壁垒,不跟就业挂钩的自学倒也是无关痛痒.但是当上岗成为自 ...

  5. ‎Cocos2d-x 学习笔记(13) ActionEase

    ActionEase是ActionInterval的子类,能够变速执行动作.把内部动作进行了包装,通过传进update的time,加上不同的计算公式,算出新的time,作为内部动作的time,实现了内 ...

  6. MakeDownPad2基本使用

    一.安装 1.1.MakeDownPad2下载安装 MakeDownPad2从官网下载安装包直接安装即可 1.2.依赖安装 MakeDownPad2支持html代码,如果要使用预览功能就需要安装awe ...

  7. django1-环境搭建

    我的环境:win10 + pycharm2019.1.3 + python3.6.5 + Django2.1.10 安装django cmd下执行:pip install django==2.1.10 ...

  8. selenium-显式等待与隐式等待(3)

    示例代码: from selenium.webdriver.support.wait import WebDriverWait as WD def find_element(self, by, loc ...

  9. Pycharm中Python Console与Terminal的区别

    1.Python Console是Python交互式模式,可以直接输入代码,然后执行,并立刻得到结果 2.Terminal是命令行模式,与系统的CMD(命令提示符)一样,可以运行各种系统命令

  10. ASP.NET Core 使用 JWT 自定义角色/策略授权需要实现的接口

    目录 ① 存储角色/用户所能访问的 API ② 实现 IAuthorizationRequirement 接口 ③ 实现 TokenValidationParameters ④ 生成 Token ⑤ ...