为了
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 > <div > <div > <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>HTML
<div > <img src="...your image url..." /></div>
CSS
.table-cell { display:table-cell; vertical-align: middle; width:100%;}.content img { width:100%; height:100%;}


