需求點(diǎn)

固定定位div中添加圖片內(nèi)容，保證圖片垂直居中，并且自適應(yīng)。
一般在第三方UI組件中，這種布局需求較為常見(jiàn)

解決方案一 （親測(cè)有效）

HTML代碼：

<div class="el-carousel__item is-active is-animating"><img src="/static/img/login-bg3.51c5580.png" alt=""> </div>

CSS代碼：

.el-carousel__item {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: inline-block;overflow: hidden;z-index: 0; } /* 這是圖片正常居中的常規(guī)寫(xiě)法 */ img {position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 81.7%; }

img的樣式中，它的寬度由設(shè)計(jì)稿的定寬與圖片寬度的比例決定的。

• 溫馨提示：

• 寬度撐不開(kāi)問(wèn)題：可以在img的外層div 添加width:100%; padding: 0 50% 解決撐不開(kāi)父類div的問(wèn)題。
• 高度占不滿屏幕問(wèn)題：保證當(dāng)前div的高度是從最外層div的高度一層一層繼承下來(lái)，如果沒(méi)有，就需要在其父級(jí)添加height: 100%或者h(yuǎn)eight: inherit。

總結(jié)

以上是生活随笔為你收集整理的绝对定位的div图片居中自适应的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。