html中图片等比例展示,纯 CSS，不用背景，实现图片等比例展示

最简单的等比例：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:160px; }

首先：display:flex; align-items:center; justify-content:center; 保证水平、垂直居中显示。

其次：width:160px; height:90px; border:1px solid #eee; 限定显示框的大小。

然后：overflow:hidden; 实现图片高度超出的话，隐藏之。

最后：width:160px; 保障图片宽度一致。

这样：当高度不够时，图片垂直居中，上下留白；当高度超出时，图片上下被隐藏。