图片保持比例自适应大小；图片保持比例自动充满父元素；图片保持比例充满盒子

需求：经常会有一个div盒子，里面放入一个img图片。需要是图片保持比例，缩放充满div盒子。

思路： 1.必须给父元素设置固定的宽高。2.给img设置 object-fit: scale-down; 属性

object-fit使用学习
先看效果：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>菜鸟教程(runoob.com)</title><style>.img_box {display: inline-block;border: 5px solid cyan;width: 200px;height: 300px;margin: 20px;}h4 {float: left;}.fill {object-fit: fill;}.contain {object-fit: contain;}.cover {object-fit: cover;}.scale-down {object-fit: scale-down;}.none {object-fit: none;}</style>
</head><body><h1>object-fit 属性</h1><img src="../../static/bgcimg.jpeg" alt="Paris"><h4>不使用 object-fit:</h4><br><p style="margin-top:30px;">注意: Internet Explorer/Edge 15 或更早版本的浏览器不支持 object-fit 属性。</p><div class="img_box"><img class="fill" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px"><h4>object-fit: fill (默认):默认，不保证保持原有的比例，内容拉伸填充整个内容容器</h4></div><div class="img_box"><img class="contain" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px"><h4>object-fit: contain:保持原有尺寸比例。内容被缩放。</h4></div><div class="img_box"><img class="cover" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px"><h4>object-fit: cover:保持原有尺寸比例。但部分内容可能被剪切。</h4></div><div class="img_box"><img class="scale-down" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px"><h4>object-fit: scale-down:保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。</h4></div><div class="img_box"><img class="none" src="../../static/bgcimg.jpeg" alt="Paris" style="width:200px;height:300px"><h4>object-fit: none:保留原有元素内容的长度和宽度，也就是说内容不会被重置。</h4></div></body></html>