在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 100%;和height: 100%; 如果图片刚好和你设定的div等比例,那自然是没有问题的,但往往不是这样的.

写出来的效果也许就是这样的

这时UI一看,这是什么玩意啊,怎么把我的图片压缩了.

那么css就提供了一个属性,可以达到我们想要的效果,只需要给图片加上

object-fit: cover;

来看看效果

同样是一张图片,还是同样的大小,但是加上object-fit: cover; 之后就变了,就是这么神奇.

这个属性还有别的值

object-fit: fill;

object-fit: contain;

object-fit: scale-down;

可以自己去试一下,看看效果.

css 如何实现图片等比例缩放的更多相关文章

  1. CSS让DIV按照背景图片的比例缩放，并让背景图片填充整个元素（转）

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

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

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

  3. 理解CSS3中的background－size(对响应性图片等比例缩放)

    理解CSS3中的background-size(对响应性图片等比例缩放) 阅读目录 background-size的基本属性 给图片设置固定的宽度和高度的 固定宽度400px和高度200px-使用ba ...

  4. C#图片按比例缩放

    C#图片按比例缩放: // 按比例缩放图片 public Image ZoomPicture(Image SourceImage, int TargetWidth, int TargetHeight) ...

  5. 让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. (转载)让ie6也支持max-width，和max-height实现图片等比例缩放

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 【转】微信小程序开发之图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文[https://blog.csdn.net/qq_31383345/article/details/53127804] 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于 ...

  8. 微信小程序学习点滴《十二》：图片等比例缩放 获取屏幕尺寸图片尺寸 自适应

    原文:http://www.wxapp-union.com/portal.php?mod=view&aid=360 早上在论坛上看到有人写了关于图片等比例缩放的文章,只是判断了图片宽是否大于屏 ...

  9. html img图片等比例缩放

    在img标签里面只设置宽,不设置高,图片就会等比例缩放.

随机推荐

  1. js中的变量作用域问题

    变量既可以是全局的,也可以是局部的. 全局变量可以在脚本的任何位置被引用.一旦你在脚本里声明了一个全局变量,就可以从这个脚本中的任何位置——包括函数内部引用它.全局变量的作用域是整个脚本. 局部变量只 ...

  2. jmeter中测试接口

    本文主要介绍在jmeter中测试接口:主要从以下几个方面进行说明: 1.jmeter简介 2.jmeter怎么做接口测试 3.jmeter进行参数化的几种形式 4.jmeter中处理乱码方法 5.jm ...

  3. 使用FileResult导出Excel数据文件

    用的是Html拼接成Table表格的方式,返回 FileResult 输出一个二进制的文件. 第一种:使用FileContentResult // 通过使用文件内容,内容类型,文件名称创建一个File ...

  4. Python 嵌套

    1 要yuanhao的首字母大写 li = [1,2,5,'taibai','yuanhao',[1,'alex',3,],True]li[4] = 'Yuanhao'print(li) li[4] ...

  5. GIL 相关 和进程池

    #GIL (global interpreter Lock) #全局解释器锁 :锁是为了避免资源竞争造成数据错乱 #当一个py启动后 会先执行主线程中的代码#在以上代码中有启动了子线程 子线程的任务还 ...

  6. vue安装流程

      一.环境搭建 vue推荐开发环境: Node.js: javascript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器.由于国内使用npm会很慢,这 ...

  7. 微软Power BI 每月功能更新系列——8月Power BI 新功能学习

    Power BI Desktop 8月新功能摘要 Power BI 产品八月发布的新版本又刷新了大家所期待的一些功能,它可以更方便的解决我们从用户那里听到的一些最重要的请求:其中最令人兴奋的是我们的导 ...

  8. pprof进行golang程序性能分析

    一.导入包 import _ "net/http/pprof" 二.启动监控routine go func() { http.ListenAndServe("0.0.0. ...

  9. Django之模版层-语法：标签 {% %}

    标签 {% %} for循环以及for..empty.. <h4>for标签</h4> {% for i in lis %} <p>{{ i }}</p> ...

  10. C#Lambda表达式详解

    Lambda表达式教程 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创 ...