当图片比例不固定时，想要让图片自适应，一般都会用background-size:cover/contain，但是这个只适用于背景图。

• img有个属性object-fit
  
  属性值：object-fit: fill / contain / cover / none / scale-down;

fill: 默认值。内容拉伸填满整个content box, 不保证保持原有的比例。

contain: 保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。

cover: 保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。

none: 保持原有尺寸比例。同时保持替换内容原始尺寸大小。

scale-down:保持原有尺寸比例,如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真；容器尺寸小于图片内容尺寸，用法跟contain一样。

最新文章

1. ASP.NET MVC Model元数据(二)
2. 【less】Bootstrap / Less 学习
3. Zabbix使用点滴
4. google map javascript api v3 例子
5. 使用ActivityManager实现进程管理
6. 使用IDEA自带的rest client参数传递乱码问题
7. CI框架初探
8. ArcMap打开越来越慢
9. nearly,about,almost的区别
10. linux下安装apache详解
11. r语言入门资料
12. Codeforce 219 div1
13. Android学习笔记——Activity的启动和创建
14. Android 通过HTTP POST请求互联网数据
15. 2017年StackOverflow上最好的20个Python问题
16. NOIP2018普及初赛解析
17. easyUI提交不跳转
18. 【转】在Express项目中使用Handlebars模板引擎
19. Eureka简介
20. Django-url路由映射与views逻辑处理

热门文章

1. 阿里云 EMAS HTTPDNS 联合函数计算重磅推出 SDNS 服务，三大能力获得突破
2. Ubuntu无法连接无线网
3. web框架起源
4. javascript正则表达式和字符串RegExp
5. pl/sql进阶一控制结构
6. JavaScript —— 给函数参数设置默认值
7. Win7中右下角“小喇叭”声音图标消失的解决方法？（已解决）
8. Creating a Pulsing Circle Animation
9. 2019-11-20-dotnet-Blazor-用-C#-控制界面行为
10. 创建ROS 工作空间时出现：程序“catkin_init_workspace”尚未安装，程序“catkin_make”尚未安装。