首頁 > web前端 > css教學 > css如何實作圖片大於div時的居中顯示(程式碼實例)

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

青灯夜游
發布: 2018-10-12 17:26:03
轉載
2593 人瀏覽過

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

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

解決方法:

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

r​​rreee

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中文網其他相關文章!

相關標籤:
css
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板