用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. JavaScript API for Office Outlook Add-in - “一页纸文档“

    上一篇文章 Office Add-in Model 为 Outlook Mail Add-in 提供的 JavaScript API 介绍 ,简单地在表格中列出了所有的 Object 定义,但是个人感 ...

  2. 21 步助你成为成功的 Web 开发者（激情不是被动的：它是一种对行动起来的追求）

    随着 Web 开发产业的爆发式发展,许多人会问这样的问题:我如何才能成为一名 Web 开发者?我认为这是一个错误的提问.问题应该是:我如何才能成为一名成功的 Web 开发者? 能提出这样的问题很重要, ...

  3. GO ：互联网时代的 C 语言！

    摘要: 每周为您推送最有价值的开源技术内参! 技术干货 标签:独家译文 1.Go 很好,为什么我们不使用它? 在这篇文章中,我将分享一下为什么我认为它很棒,使用它的一些缺点,以及为什么它还不是我们 Z ...

  4. RapidJSON 1.0 正式版发布，C++的JSON开发包

    分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSAp ...

  5. Model1简介

    Model1模型出现前,整个Web应用的情况:几乎全部由JSP页面组成,JSP页面接收处理客户端请求,对请求处理后直接做出响应. 弊端:在界面层充斥着大量的业务逻辑的代码和数据访问层的代码,Web程序 ...

  6. Delphi中，indy控件实现收发邮件的几点学习记录( 可以考虑加入多线程，用多个邮箱做一个邮箱群发器) 转

    关于用Delphi中的Indy控件实现收发邮件的几点学习记录             这几天心里颇不宁静,不是因为项目延期,而是因为自己几个月前做的邮件发送程序至今无任何进展,虽然一向谦虚的人在网上发 ...

  7. 30+简约和平铺的WordPress复古主题

    现在复古风格的设计非常流行,你可以快速建立属于自己的复古风格的网站.继续阅读下去,我们将展示给你一些精彩的WordPress复古主题. 多年来,网页设计师们纷纷用3D效果,纹理,噪声,渐变的灯光效果, ...

  8. 为什么Python中“2==2>1”结果为True

    在Python中,你可能会发现这样一个奇怪的现象: >>> 2 == 2 > 1 True >>> (2 == 2) > 1 False >> ...

  9. Java集合 ArrayList原理及使用

    ArrayList是集合的一种实现,实现了接口List,List接口继承了Collection接口.Collection是所有集合类的父类.ArrayList使用非常广泛,不论是数据库表查询,exce ...

  10. 从零开始的Wordpress个人博客搭建

    0x00前言 在博客园写了有一年的博客了,也想换换新口味,wordpress的众多的主题和个性化设置非常符合我的喜好,所以捣鼓了一天也算是把它搭好了. 直接在服务器上搭建wordpress还需要配置m ...