美文网首页
长宽不一样的图片,自适应垂直居中

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

作者: 撑船的摆渡人 | 来源:发表于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