图片大于div时的居中显示

最新推荐文章于 2022-07-01 14:42:45 发布

weixin_30438813

最新推荐文章于 2022-07-01 14:42:45 发布

阅读量235

点赞数

原文链接：http://www.cnblogs.com/return00/p/9745931.html

版权

当图片大于div时，想要图片居中显示，如果图片等比例缩小可能会导致图片不能填充整个div，如果直接将图片不设置宽高，将其外层div设置overflow:hidden；这时即使外层div设置了水平垂直居中，图片也不是居中的效果：

解决方法：

1- 把图片设置为背景图片

 
          <div  
          class 
          = 
          "face-img-contain"  
          id= 
          "face-img-back" 
          > 
         
          </div>

 
          .face-img-contain{ 
         
          width:348px; 
         
          height:436px; 
         
          margin:0 auto; 
         
          margin-top: 14px; 
         
          position: relative; 
         
          background-image: url(../images/face-img/test-22.png); 
         
          background-repeat: no-repeat; 
         
          background-position: center; 
         
          background-size: cover; 
         
          display: flex; 
         
          justify-content: center; 
         
          align-items: center; 
         
          border: 1px solid gainsboro; 
         
          }

 
          若是后台返回的地址，别忘了拼接方法正确 
         
          $( 
          "#face-img-back" 
          ).css( 
          "background-image" 
          , 
          "url(" 
          +faceImg+ 
          ")" 
          );

2- 给图片设置相对div的100%的宽高，再设置object-fit:cover;

 
          <div  
          class 
          = 
          "face-img-contain-new-new" 
          > 
         
          <img src= 
          "../images/face-img/test-22.png"  
          alt= 
          ""  
          class 
          = 
          "face-img-defined1"  
          id= 
          "face-img-photo" 
          > 
         
          </div> 
         
          .face-img-contain- 
          new 
          - 
          new 
          { 
         
          width:348px; 
         
          height:436px; 
         
          margin:0 auto; 
         
          margin-top: 14px; 
         
          position: relative; 
         
          display: flex; 
         
          justify-content: center; 
         
          align-items: center; 
         
          overflow: hidden; 
         
          border: 1px solid gainsboro; 
         
          } 
         
          .face-img-defined1{ 
         
          width:100%; 
         
          height:100%; 
         
          object-fit: cover; 
         
          }