在进行布局的时候,很多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. netty pipeline.addLast

    pipeline有一个主要的实现类 DefaultChannelPipeline ,addLast顾名思义,就是在处理器链的最后添加一个channelHandler. 代码如下:@Override  ...

  2. L316 波音737Max 危机

    Boeing Scrambles To Restore Faith In Its 737 MAX Airplane After Crashes In the wake of two deadly cr ...

  3. mysql检查-优化-分析

    Mysql分析.检查.优化表 l 分析表 对表进行分析(分析关键字的分布, 分析存储MyISAM等表中键的分布) MySQL中使用ANALYZE TABLE语句来分析表,该语句的基本语法如下: mys ...

  4. ecmall 主从表的4种模型关系

    eccore/model/model.base.php对应关系: 举例:在includes/models goods.model.php 里 因为店铺可以对应多个商品,商品只能对应一个店铺,所以商品B ...

  5. 2.15 富文本（richtext）

    2.15 富文本(richtext) 前言     富文本编辑框是做web自动化最常见的场景,有很多小伙伴不知从何下手,本篇以博客园的编辑器为例,解决如何定位富文本,输入文本内容一.加载配置    1 ...

  6. 第七十四课 图的遍历（BFS）

    广度优先相当于对顶点进行分层,层次遍历. 在Graph.h中添加BFS函数: #ifndef GRAPH_H #define GRAPH_H #include "Object.h" ...

  7. [c++]base64编解码 and image

    //½«Í¼ÏñתΪbase64¸ñʽ vector<uchar> vecImg; //Mat ͼƬÊý¾Ýת»»Îªvector<uchar> vector< ...

  8. Python之路，第八篇：Python入门与基础8

    python3    字典(dict) 概念:1 ,字典是一种可变的容器,可以存储任意类型的数据: 2, 字典中的每个数据都是用“键”(key)进行索引,而不像序列可以用下标进行索引: 3, 字典中的 ...

  9. [LeetCode&Python] Problem 122. Best Time to Buy and Sell Stock II

    Say you have an array for which the ith element is the price of a given stock on day i. Design an al ...

  10. inner join 与一般笛卡尔积的区别

    inner join 与一般笛卡尔积的区别:inner join是笛卡尔积的特殊形式.如果有表a和表b,表a有m条记录,表b有n条记录,则一般笛卡尔积后得到的记录条数是m*n条,记录之间的组合是随意的 ...