<div class="box">

    <img src="01.jpg"/>

</div>

.box{

}

//只要给图片设置属性object-fit:cover 会自动截取盒子大小的图片，不会压缩

.box img{

  object-fit:cover;

}

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

  1. css中图片等比例缩放

    li img{ display: inline-block; max-height: 60px; max-width: 60px; vertical-align: middle; }

  2. css 如何实现图片等比例缩放

    在进行布局的时候,很多PM都要求图片等比例缩放,而且要求图片不失真,不变形,但是UI设计好了这个div的宽度又不能随意更改,而后台传过来的图片也不是等比例的图片,这就比较难受了,写成 width: 1 ...

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

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

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

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

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

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

  6. C#图片按比例缩放

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

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

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

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

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

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

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

随机推荐

  1. 【知乎Live】狼叔：如何正确的学习Node.js

    文章链接 https://i5ting.github.io/How-to-learn-node-correctly/#1 或在 https://github.com/i5ting/How-to-lea ...

  2. Sql查询某个字段是否包含小写字母

    SELECT * from student where username COLLATE Chinese_PRC_CS_AS LIKE '%[abcdefghijklmnopqrstuvwxyz]%'

  3. 中标麒麟龙芯平台--docker基础镜像制作

    Docker 是一个开源的应用容器引擎,基于 Go 语言 并遵从Apache2.0协议开源.Docker 的出现为开发人员和运维人员带来了极大的便利.Docker在X86下常见的发行版Linux如Ub ...

  4. springboot-文件上传xls及POI操作Excel

    1.pom导入依赖文件 <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-o ...

  5. spring kafka生产、消费消息

    参考网址: https://blog.csdn.net/lansetiankong12/article/details/54946641 1.新建Maven项目-KafkaMaven ->点击n ...

  6. spring.http.multipart.maxFileSize提示无效报错问题处理

    在SpringBoot项目中,配置spring.http.multipart.maxFileSize用于限定最大文件上传大小. 但是,SpringBoot版本不同,关于这一块的配置也不相同. 1.Sp ...

  7. ogg 单表拆分合并进程

    metalink文档:1320133.1和1512633.1 map scott.emp1, target scott.emp1 ,FILTER(@RANGE(1,3));  --拆分 map sco ...

  8. WebApi-2 自定义路由与默认路由

    向Web API添加路由 public static void Register(HttpConfiguration config) { //// Web API 配置和服务 //// 将 Web A ...

  9. FJUT-这还是一道数论题

    这还是一道数论题 TimeLimit:4000MS  MemoryLimit:128MB 64-bit integer IO format:%lld Special Judge   Problem D ...

  10. MySQL存储过程中的事务执行失败之后获取错误信息

    1.表结构: 2. 存储过程中: 代码如下: BEGINDECLARE CONTINUE HANDLER FOR SQLEXCEPTIONBEGINROLLBACK;GET DIAGNOSTICS C ...