css实现图片按比例缩放自适应父级

css实现图片按比例缩放自适应父级，最长边充满父级，另一边按比例缩放，避免图片拉伸或压缩导致变形。

html 如下：

<div class="box">
    <img src="xxxx"/>
<div>

css 如下：

.box{
    width:100px;
    height:100px;
}

.pic {
    max-width: 100px;
    max-height: 100px;
}

​​​​​​​

利用 max-width、max-height设置最大宽高，这样图片会进行自适应，也不用管那边高。