css實現圖片大于div時的居中顯示的方法

本文小編為大家詳細介紹“css實現圖片大于div時的居中顯示的方法”，內容詳細，步驟清晰，細節(jié)處理妥當，希望這篇“css實現圖片大于div時的居中顯示的方法”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

    當圖片大于p時，想要圖片居中顯示，如果圖片等比例縮小可能會導致圖片不能填充整個p，如果直接將圖片不設置寬高，將其外層p設置overflow:hidden；這時即使外層p設置了水平垂直居中，圖片也不是居中的效果

    解決方法：

    1-把圖片設置為背景圖片

    <divclass="face-img-contain"id="face-img-back">

    </div>

    .face-img-contain{

    width:348px;

    height:436px;

    margin:0auto;

    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:1pxsolidgainsboro;

    }

    若是后臺返回的地址，別忘了拼接方法正確

    $("#face-img-back").css("background-image","url("+faceImg+")");

    2-給圖片設置相對p的100%的寬高，再設置object-fit:cover;

    <divclass="face-img-contain-new-new">

    <imgsrc="../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:0auto;

    margin-top:14px;

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

    border:1pxsolidgainsboro;

    }

    .face-img-defined1{

    width:100%;

    height:100%;

    object-fit:cover;

    }

讀到這里，這篇“css實現圖片大于div時的居中顯示的方法”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業(yè)資訊頻道。