css如何實作圖片大於div時的居中顯示（程式碼實例）

本文為大家介紹css如何實現圖片大於div時的居中顯示（程式碼實例），有一定的參考價值，有需要的朋友可以參考一下，希望對你們有幫助。

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

解決方法：

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

r​​rreee

<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;
}

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

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

<div class="face-img-contain-new-new">
    <img class="face-img-defined1 lazy"  src="/static/imghwm/default1.png"  data-src="../images/face-img/test-22.png"   alt=""  id="face-img-photo">
</div>

總結：以上就是這篇文章的全部內容，希望能對大家的學習有所幫助。更多相關教學請訪問 CSS基礎影片教學！

相關建議：

CSS線上手冊

#div/css圖文教學

以上是css如何實作圖片大於div時的居中顯示（程式碼實例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！