通过CSS实现图片等比缩放 自动居中 自适应大小

网站中常常用到缩略图，缩略图的大小长宽比都是固定的，但图片却是或长或短，简单填充的话会发生图片变形的情况，特别不美观。那么有没有办法完美实现图片等比缩放，并且居中显示呢？

初始状态

比如文章列表，缩略图默认是横向的，遇到纵向图片时会变形严重

解决方法

示例HTML代码

<a href="https://bak.yantuz.cn:8000/230.html">
    <img width="220" height="150" src="/WP_Db/images/ww1.sinaimg.cn/large/6f5a603egy1fmsylff5f4j20dy0f6duj.jpg" />
</a>

这样得出的会是一副变形的预览图，要想实现自动缩写放加居中，必须用背景图的方式实现，所以首先修改html代码，删掉img标签，给a标签添加thumb类

<a href="https://bak.yantuz.cn:8000/230.html" class="thumb"></a>

修改css代码

.thumb{
    width:220px;
    height:150px;
    /*设置背景图像，不平铺，且上下左右居中*/
    background:url(https://ww1.sinaimg.cn/large/6f5a603egy1fmsylff5f4j20dy0f6duj.jpg) no-repeat center;
    /*背景图填满容器*/
    background-size: contain;
}

修改效果

可见图片已经按正常比例显示了，而且左右都留出了间隙，如果是超宽的图片，则会上下同时留间隙。