前端img标签css|img如何保持纵横比（object-fit）
1.object-fit
object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。
您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。
2.属性值
object-fit: fill / contain / cover / none / scale-down;
3.区别
3.1fill
默认值。内容拉伸填满整个content box,不保证保持原有的比例。
文章图片
3.2contain
保持原有尺寸比例。长度和高度中短的那条边跟容器大小一致，长的那条等比缩放，可能会有留白。
文章图片
3.3cover
保持原有尺寸比例。宽度和高度中长的那条边跟容器大小一致，短的那条等比缩放。可能会有部分区域不可见。
文章图片
3.4none
保持原有尺寸比例。同时保持替换内容原始尺寸大小。
文章图片
3.5 scale-down
【前端img标签css|img如何保持纵横比（object-fit）】保持原有尺寸比例如果容器尺寸大于图片内容尺寸，保持图片的原有尺寸，不会放大失真;
容器尺寸小于图片内容尺寸，用法跟contain—样。
文章图片
推荐阅读
- 标签、语法规范、内联框架、超链接、CSS的编写位置、CSS语法、开发工具、块和内联、常用选择器、后代元素选择器、伪类、伪元素。
- Jsr303做前端数据校验
- 第二阶段day1总结
- whlie循环和for循环的应用
- 7、前端--jQuery简介、基本选择器、基本筛选器、属性选择器、表单选择器、筛选器方法、节点操作、绑定事件
- 前端代码|前端代码 返回顶部 backToTop
- 今日份H5
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端自学笔记01
- js保留自定义小数点