用object-fit:cover

object-fit属性详解

object-fit:CSS 属性指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框。

  1. object-fit:fill 被替换的内容大小可以填充元素的内容框，整个对象将完全填充此框，如果对象的宽高比不匹配其框的宽高比，你们对象会被拉伸。
  2. object-fit:contain 被替换的内容将被缩放，以在填充元素的内容框时保持其宽高比，整个对象在填充盒子的同时保留其长宽比，因此如果宽高比与框的宽高比不匹配，该对象将被添加
  3. object-fit:cover 被替换的内容大小保持其宽高比，同事填充元素的整个内容框，如果对象的宽高比与盒子的宽高比不匹配，改对象将被裁剪以适应。
  4. object-fit:none 被替换的内容尺寸不会被改变
  5. object-fit:scale-down 内容的尺寸就像是指定了none或contain，取决于哪一个将导致更小的对象尺寸。

兼容性支持：

pc:基本支持，IE不支持。
mobile:基本支持，安卓4.4.4 ie不支持

css 图片裁剪显示的更多相关文章

  1. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  2. CSS图片裁剪Clip

    CSS Clip 裁剪 可以用它来裁剪一张图片噢. 我们来裁剪一下Google图标,把G字给裁剪下来. 注意这个clip得配合绝对定位才能使用,不然不起效果. rect (top, right, bo ...

  3. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  4. ImageLoader框架的使用、调用系统相册显示图片并裁剪显示、保存图片的两种方式

    ImageLoader虽然说是一个相对于比较老的一个框架了 ,但是总的来说,还是比较好用的,今天我就总结了一下它的用法.还有调用系统相册并裁剪,以及,通过sharedpreference和文件存储来保 ...

  5. Html5 Css实现方形图片 圆形显示

    <!doctype html><html><head><meta charset="utf-8"><title>方形图片 ...

  6. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  7. vue打包后js和css、图片不显示，引用的字体找不到问题

    vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...

  8. Vue项目打包发布后CSS中的背景图片不显示

    相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示,具体如何解决只需要更改bind的配置即可 修改 build/utils.js 中的 generateLoaders ...

  9. CSS图片Img等比例缩放且居中显示

    常用来做图片放大显示的遮罩层imgScale HTML <div id="imgScale" > <img src=""> </d ...

随机推荐

  1. Memory Ordering （注意Cache带来的副作用，每个CPU都有自己的Cache，内存读写不再一定需要真的作内存访问）

    Memory Ordering   Background 很久很久很久以前,CPU忠厚老实,一条一条指令的执行我们给它的程序,规规矩矩的进行计算和内存的存取. 很久很久以前, CPU学会了Out-Of ...

  2. 【Aizu - ALDS1_1_C】Prime Numbers（素数筛法）

    Prime Numbers  Descriptions: A prime number is a natural number which has exactly two distinct natur ...

  3. 【转】Mysql索引最左匹配原则理解

    作者:沈杰 链接:https://www.zhihu.com/question/36996520/answer/93256153来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  4. 曹工说Tomcat3：深入理解 Tomcat Digester

    一.前言 我写博客主要靠自己实战,理论知识不是很强,要全面介绍Tomcat Digester,还是需要一定的理论功底.翻阅了一些介绍 Digester 的书籍.博客,发现不是很系统,最后发现还是官方文 ...

  5. mariadb10.1.17安装

    一.源码编译安装gcc-5.1.0 1.下载gcc源码包 Download (HTTP): http://ftpmirror.gnu.org/gcc/gcc-5.2.0/gcc-5.2.0.tar.b ...

  6. php对象在内存中创建于释放

    <?php /** * 1.对象的创建占用内存, * 对象内存释放,析构方法就是在对象释放前运行最后的一步.可以自动释放和手动释放 * 手动释放:通过unset($p);来释放对象,在这个时候会 ...

  7. python算法与数据结构-队列(44)

    一.队列的介绍 队列的定义:队列是一种特殊的线性表,只允许在表的头部(front处)进行删除操作,在表的尾部(rear处)进行插入操作的线性数据结构,这种结构就叫做队列.进行插入操作的一端称为队尾,进 ...

  8. Sole跟Tomcat的整合 Solr4.4 + Tomcat

    1, 下载Solr4.4 Tomcat7 2, 拷贝 solr-4.4.0\dist\solr4.4.war  => tomcat\webapps 下面 重命名为solr.war 3, 启动to ...

  9. mysql的union和or

    实践出真知! 使用union连接 select `id` from `表名` where 0=0 and active=1 and `fullname` like '王%' union select ...

  10. 并发编程-concurrent指南-阻塞队列-优先级的阻塞队列PriorityBlockingQueue

    PriorityBlockingQueue是一个支持优先级的无界阻塞队列. 它使用了和类 java.util.PriorityQueue 一样的排序规则.你无法向这个队列中插入 null 值. 所有插 ...