不同比例图片居中缩放显示的三种方法

效果

方法一

动态给img标签src属性赋值来达到传入不同比例的图片时始终等比例缩放显示，兼容性最好

HTML代码

<div class="img-box">
    <img src="..."/>
</div>

CSS代码

.img-box{
    /*限定图片盒子宽高*/
    width:500px;
    height:500px;
}
img{
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    /*不定宽高的图片居中显示*/
    position: relative;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%)
}

方法二

动态设置图片展示区域的背景图background-image来达到不同比例图片时始终等比例缩放显示

HTML代码

<div class="img-box"></div>

CSS代码

.img-box{
    /*限定宽高*/
    width: 500px;
    height: 500px;
    background-image: url('...');
    /*水平垂直居中*/
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;}

方法三

直接赋值img标签的src属性即可，最简单但低版本兼容性差

HTML代码

<img src="..."/>

CSS代码

img{
    /*限定宽高*/
    width:500px
    height:500px;
    object-fit:contain
}

object-fit这个属性决定了像img、video等替换元素的内容应该如何使用他的宽度和高度来填充其容器。