一个乐于分享的博客
关注互联网折腾服务器分享码农的日常

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

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

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

初始状态

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

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

解决方法

示例HTML代码

<a href="https://yantuz.cn/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://yantuz.cn/230.html" class="thumb"></a>

修改css代码

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

修改效果

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

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

转载务必注明出处:岩兔站 » 通过CSS实现图片等比缩放 自动居中 自适应大小
赞 (1) or 打赏

讨论区 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址