长宽不一样的图片,自适应垂直居中

2019-06-12  本文已影响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);
    }
上一篇 下一篇

猜你喜欢

热点阅读