用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. isHiden和isVisible的区别（可是有nativeEvent进行设置）

    之前一直对isHiden和isVisible的区别比较模糊,都是乱用的.今天因需要仔细看了一下. 1.isHiden只是返回部件的隐藏属性,并不能表示部件当前的真实状态.比如A部件有个子部件B,而A处 ...

  2. 将后台窗口激活到前台的方法（使用AttachThreadInput和SetForegroundWindow两个API）

    下面这种方法是我见到的最理想的,还有一些其他的方法,像通过SetWindowsPos这个API设置窗口的Z-oder到最顶层,再设置回去.还有通过把当前窗口设置到底层,然后激活目标窗口等等方法. HW ...

  3. XPath概述

    1.  XPath 具体示例可参考网址: http://www.zvon.org/xxl/XPathTutorial/General/examples.html 1.1 概述 * 现节点下所有元素 * ...

  4. abp(net core)+easyui+efcore仓储系统——创建应用服务（五）

    abp(net core)+easyui+efcore仓储系统目录 abp(net core)+easyui+efcore仓储系统——ABP总体介绍(一) abp(net core)+easyui+e ...

  5. 使用 Cake 推送 NuGet 包到 AzureDevops 的 Artifacts 上

    前言 大家好,我最近在想如何提交代码的时候自动的打包 NuGet 然后发布到 AzureDevOps 中的 Artifacts,在这个过程中踩了很多坑,也走了很多弯路,所以这次篇文章就是将我探索的结果 ...

  6. hgoi#20190628

    更好的阅读体验 来我的博客观看 T1-打印收费 CZYZ 校园内有一家打印店,收费有着奇葩的规则,对于打印的量不同的情况会收取不同的费用.例如打印少于 100 张的时候,收取 20 分每张,但是打印不 ...

  7. 在C#中创建文件快捷方式

    创建快捷方式对于绝大多数 Windows 用户来说都是小菜一碟了,然而,这项工作却为程序员带来不少麻烦..NET 没有提供简便直接的创建快捷方式的方法,那么在 .NET 中我们如何为应用程序创建快捷方 ...

  8. Spring Boot2(一)：使用Spring Boot2集成Mybatis基础搭建

    Mybatis 初期使用比较麻烦,需要各种配置文件.实体类.Dao 层映射关联.还有一大推其它配置.mybatis-spring-boot-starter 就是 Spring Boot+ Mybati ...

  9. tomcat配置多个数据源

    应用场景: 公司tomcat服务器中运行着多个工程,工程链接的mysql数据库不同,所以每个工程的Spring总配置文件中都配置了数据源. 需求:   将数据源统一拿到tomcat中配置. 本来指派给 ...

  10. 模拟实现 Tomcat 的核心模块：NIO，HTTP，容器和集群

    如果你想看 Tomcat 源码但又无从入手,不妨从这个项目开始,代码量不多,但包含了 Tomcat 的核心处理流程,并且源码中有相当丰富的注释.相信通过此项目你能了解: NIO 基本编程.HTTP 协 ...