需求点
固定定位div中添加图片内容,保证图片垂直居中,并且自适应。
一般在第三方UI组件中,这种布局需求较为常见
解决方案一 (亲测有效)
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;
}
/* 这是图片正常居中的常规写法 */
img {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 81.7%;
}
img的样式中,它的宽度由设计稿的定宽与图片宽度的比例决定的。
- 温馨提示:
- 宽度撑不开问题:可以在img的外层div 添加
width:100%; padding: 0 50%
解决撑不开父类div的问题。 - 高度占不满屏幕问题:保证当前div的高度是从最外层div的高度一层一层继承下来,如果没有,就需要在其父级添加
height: 100%
或者height: inherit
。