在进行布局的时候,很多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. 《uniGUI for cBuilder入门到精通》新书预定

    <uniGUI for cBuilder入门到精通>火热预定中,从零开始带你入瓮带你飞,手把手教你如何快速安装,开发和部署一个web系统,前十名用户售价暂定100元,后续价格每本200元, ...

  2. Python中替换敏感字

    敏感词在文本文件document.txt中,当用户输入敏感词语时,用*号代替并打印出来 document.txt中的文件内容如下: 北京 上海 广州 深圳 领导 test.py content=inp ...

  3. c# GetType()和typeof()的区别

    c#   GetType()和typeof()的区别 C#中任何对象都具有GetType()方法,返回Type类型的当前对象的类型. GetType()是基类System.Object的方法,因此只有 ...

  4. 在Intellij IDEA中修改模板中user变量名称

    在Intellij IDEA中的注释模板中的${user}名称是根据当前操作系统的登录名来取的,有时候登录名称和我们实际的user名称并不相同. 修改方法如下: 方法一:可以在settings的fil ...

  5. 用Java批量重命名文件

    要事先在C盘里创建“照片”和“照片1”两个文件夹 1import java.io.*; public class Jack { public static void main(String[] arg ...

  6. vue国际化插件

    1.安装 $ npm install vue-i18n 2.引入 import VueI18n from 'vue-i18n' Vue.use(VueI18n) const i18n = new Vu ...

  7. 排序jq

    var arr = [1,2,3,4,5,6,7]; arr.sort(function (a, b) { 从大到小 if (a > b) { return 1; } else if (a &l ...

  8. Java编程中必须了解 十几个代码段

    向文件末尾添加内容 字符串有整型的相互转换 转字符串到日期 java.util.Date = java.text.DateFormat.getDateInstance().parse(date Str ...

  9. [转]谈谈 Bias-Variance Tradeoff

    https://liam0205.me/2017/03/25/bias-variance-tradeoff/ 谢谢原作者! 谈谈 Bias-Variance Tradeoff 发表于 2017 年 0 ...

  10. web(二)html

    html编写规范 在输入开始标签时同时输入结束标签,以防丢失标签 保证缩紧格式(一个tab键) 主动添加注释(快捷键 选中后 Ctrl+Shift+/) Html的调试 开发者工具(快捷键F12)是前 ...