在进行布局的时候,很多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. 201621123001 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集 异常 1. 常用异常 结合题集题目7-1回答 1.1 自己以前编写的代码中经常出 ...

  2. redis 五大数据类型之list篇

    1.lpush/lpop/rpop/rpush/lrange  这里的list就是链表,lpush就是从左往右插入数据,rpush就是从右往左插数据,lrange就是从左往右范围性的取值,pop就是弹 ...

  3. 18-10-15 服务器删除数据的方法【Elasticsearch 数据删除 (delete_by_query 插件安装使用)】方法二没有成功

    rpa 都是5.xx  ueba 分为2.0 或者5.0 上海吴工删除数据的方法 在许多项目中,用户提供的数据存储盘大小有限,在运行一段时间后,大小不够就需要删除历史的 Elasticsearch 数 ...

  4. 安装vue-cookie

    // 安装cookie的命令// npm install vue-cookie --save// 为项目配置全局vue-cookieimport VueCookie from 'vue-cookie' ...

  5. HDU 6063 17多校3 RXD and math（暴力打表题）

    Problem Description RXD is a good mathematician.One day he wants to calculate: ∑i=1nkμ2(i)×⌊nki−−−√⌋ ...

  6. python 基础 内置函数 和lambda表达式

    1.把任意数值转化为字符串有两种方法. (1)str()用于将数值转化为易于人读的形式.print(str("我是中国人"))>>>我是中国人 (2)repr() ...

  7. C++和C在linux下 和在windows下有什么区别?

    一.函数库的区别 linux下的C函数库和windows下的函数库系统调用的机制不一样,Glibc包含了主要的C库.这个库提供了基本例程,用于分配内存.搜索目录.打开关闭文件.读写文件.字串处理.模式 ...

  8. Unescaped left brace in regex is illegal here in regex; marked by <-- HERE in m/\${ <-- HERE ([^ \t=:+{}]+)}/ at xxxx/usr/bin/automake line 3939.

    /********************************************************************** * Unescaped left brace in re ...

  9. Java单链表简单实现* @version 1.0

    package com.list; /** * 数据结构与算法Java表示 * @version 1.0 * @author 小明 * */ public class MyLinkedList { p ...

  10. com.sun.org.apache.xerces.internal.impl.dv.util.Base64出现的问题

    import com.sun.org.apache.xerces.internal.impl.dv.util.Base64; 出现的问题是这个在eclipse中无法使用,解决方法如下: (1)进入ec ...