长宽不一样的图片,自适应垂直居中
作者:
撑船的摆渡人 | 来源:发表于
2019-06-12 19:11 被阅读0次

image.png
.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);
}
本文标题:长宽不一样的图片,自适应垂直居中
本文链接:https://www.haomeiwen.com/subject/etsrfctx.html
网友评论