长宽不一样的图片,自适应垂直居中
2019-06-12 本文已影响0人
撑船的摆渡人

.oImg {
width: 300px;
height: 300px;
display: inline-block;
border: solid 1px #ccc;
background-color: red;
background-origin: content;
/*从content区域开始显示背景*/
background-position: 50% 50%;
/*图片上下左右居中*/
background-size: contain;
/*保持图像本身的宽高比例,将图片缩放到宽度或高度正好适应定义背景的区域*/
background-repeat: no-repeat;
/*图像不重复显示*/
}
.oImg1 {
background-image: url(1.jpg);
}
.oImg2 {
background-image: url(2.jpg);
}