本文為大家介紹css如何實現圖片大於div時的居中顯示(程式碼實例),有一定的參考價值,有需要的朋友可以參考一下,希望對你們有幫助。
當圖片大於p時,想要圖片居中顯示,如果圖片等比例縮小可能會導致圖片不能填充整個p,如果直接將圖片不設定寬高,將其外層p設定overflow:hidden ;這時即使外層p設定了水平垂直居中,圖片也不是居中的效果:
解決方法:
1- 把圖片設定為背景圖片
rrreee
1 2 | <div class = "face-img-contain" id= "face-img-back" >
</div>
|
登入後複製
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .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;
1 2 | 若是后台返回的地址,别忘了拼接方法正确
$( "#face-img-back" ).css( "background-image" , "url(" +faceImg+ ")" );
|
登入後複製
1 2 3 | <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>
|
登入後複製
總結:以上就是這篇文章的全部內容,希望能對大家的學習有所幫助。更多相關教學請訪問 CSS基礎影片教學!
相關建議:
CSS線上手冊
#div/css圖文教學
以上是css如何實作圖片大於div時的居中顯示(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!