在进行布局的时候,很多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. elk之elasticsearch安装

    环境: centos7 jdk8 参考: https://www.elastic.co/guide/en/elasticsearch/reference/current/rpm.htmlhttp:// ...

  2. Linux文件系统命令 rm

    命令名:rm 功能:删除某一个文件或者目录 eg: renjg@renjg-HP-Compaq-Pro--MT:~/WorkSpace$ ls BM3 gf k8s minicom_download ...

  3. 关于索引的相关 day45

    mysql数据库索引相关   一 介绍 什么是索引? 索引在MySQL中也叫做“键”,是存储引擎用于快速找到记录的一种数据结构.索引对于良好的性能非常关键,尤其是当表中的数据量越来越大时,索引对于性能 ...

  4. shell脚本实例-while实现批量创建用户

    #!/usr/bin/bash while read line #读取一行结果 do if [ ${#line} -eq 0 ];then #如果有空行的话就跳过这次循环 contiune fi us ...

  5. 常见无线DOS攻击

    记录下自己最近一段时间对无线渗透学习的笔记. 无线DOS就是无线拒绝服务攻击.主要包括以下几种攻击类型:Auth Dos攻击.Deauth Flood攻击.Disassociate攻击及RF干扰攻击等 ...

  6. JAVA中的Set

    Set中存放的是没有重复的数据,下说记录一下使用中的小细节. 1.HashSet 区分大小写: Set<String> set1 = new HashSet<String>() ...

  7. 【Python】xml 解析

    1. XML:指可扩展标记语言,是一种标记语言,用于存储数据和传输数据,但没有像HTML那样具有预定义标签,需要程序猿自定义标签 2. XML的解析:读取XML数据结构中的某些信息,比如读取书的属性 ...

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

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

  9. Oracle自我补充之trunc()函数使用介绍

    oracle trunc函数使用介绍 核心提示:oracle trunc函数使用介绍 1.TRUNC(for dates) TRUNC函数为指定元素而截去的日期值. 其具体的语法格式如下: TRUNC ...

  10. 基于Hexo+Node.js+github+coding搭建个人博客——基础篇

    附上个人教程:http://www.ookamiantd.top/2017/build-blog-hexo-base/ 搭建此博客的动机以及好处在此就不多谈了,之前已经表达过,详情请看Start My ...