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

效果

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

HTML代码

复制代码

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代码

CSS代码

.img-box{

/*限定宽高*/

width: 500px;

height: 500px;

background-image: url('...');

/*水平垂直居中*/

background-repeat: no-repeat;

background-size: contain;

background-position: center;}复制代码

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

HTML代码

复制代码

CSS代码

img{

/*限定宽高*/

width:500px

height:500px;

object-fit:contain

}复制代码

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