为了height:100%
工作,所有父容器必须为height:100%
。如果您注意到,则您的.table- cell
样式没有height:100%
。
.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%;
}