您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

高度:表格单元中的100%在Firefox和IE上不起作用

高度:表格单元中的100%在Firefox和IE上不起作用

为了height:100%工作,所有父容器必须为height:100%。如果您注意到,则您的.table- cell样式没有height:100%

添加此样式可解决Firefox中的问题:

.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
    height:100%;
}

或者,也可以将图像添加到HTML中而不是CSS中background-image

body, html {

    margin:0;

    padding:0;

    height:100%;

}

.table {

    display:table;

    width:100%;

    height:100%;

}

.table-cell {

    display:table-cell;

    vertical-align: middle;

    width:100%;

}

.content {

    height: 100%;

    display: block;

    overflow: hidden;

    position: relative;

    background-size:cover;

}



.content img {

    width:100%;

    height:100%;

}


<div class="table">

    <div class="table-cell">

        <div class="content">

            <img src="http://spaceinimages.esa.int/var/esa/storage/images/esa_multimedia/images/2012/11/solar_eclipse_corona/12092636-3-eng-GB/Solar_eclipse_corona_node_full_image.jpg"/>

        </div>

    </div>

</div>
<div class="content">
    <img src="...your image url..." />
</div>
.table-cell {
    display:table-cell;
    vertical-align: middle;
    width:100%;
}

.content img {
    width:100%;
    height:100%;
}
其他 2022/1/1 18:16:18 有397人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶