一、图片原始宽高等比例缩放

div img { max-width:100%; max-height:100%; }

图片等比例缩放，不变形；图片所有区域都会显示。但是有可能会造成横向、纵向白边，当我们在做图片列表时，这会看起来有点乱。所以有了第二种方式。

二、宽度固定，高度自适应

div { display:flex; align-items:center; justify-content:center; width:160px; height:90px; border:1px solid #eee; overflow:hidden; }

div img { width:100%; height:auto;}

以上能保证横向没有白边，高度不足时上下留白，高度超出时只展示图片的上部分，超过部分隐藏。其中div的flex布局控制图片垂直居中展示， overflow:hidden;控制超出部分隐藏。 图片宽度设置为100%。高度为auto。 注意：图片不可设置最大高度max-height:100%;这样会导致图片被压缩。