我试图为灯箱中的图片制作可扩展的视图。我有办法让它在各种尺寸的屏幕上看起来都很棒。但是，只有Google Chrome对此方法的行为与其他浏览器不同。
<div class="parent">
<span class="helper"></span>
<img src="">
</div>
我创建了一个帮助元素，将其display设置为inline-block并将vertical-align更改为middle span和{img 1}}。这样可以确保将图像放在其父级的中间。
为确保图片的height和width不会超过其父级，我将其设置为90%。 （不是100%＆＃39;因为我也想要一些填充。）
所以我的CSS看起来像这样：
.parent{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: #ccc;
text-align: center;
}
.helper{
display: inline-block;
vertical-align: middle;
height: 100%;
}
img{
vertical-align: middle;
max-width: 90%;
max-height: 90%;
}
在this fiddle中，您可以看到除谷歌浏览器外，它在所有浏览器中都有效。 Chrome会忽略设置的最大高度。这将使图像比它的父母更大，而不是好......
这个问题有解决办法吗？
答案 0 :(得分：2)
用纯css检查这个，没有js / jquery。只需要将你的内容包装在div中并给它100％的高度，就像你说max-height：80％它需要80％的父亲而不是那里。
.parent{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: #ccc;
text-align: center;
}
.helper{
display: inline-block;
vertical-align: middle;
height: 100%;
}
img{
vertical-align: middle;
max-width: 90%;
max-height: 80%;
}<div id = "parentDiv" class="parent">
<div style="height: 100%;">
<span class="helper"></span>
<img id = "imgId" src="http://3d-diva.davidmichaeldesigns.com/images/tree-01.png"/>
</div>
</div>
希望这是你要找的东西：）
答案 1 :(得分：1)
你可以通过javascript动态地将父亲div传递给图片标签。
function setImgHt(){
var imgHeight = document.getElementById('parentDiv').clientHeight;
document.getElementById('imgId').setAttribute("style","height:"+imgHeight+"px");
}.parent{
position: absolute;
top: 0;
right: 0;
bottom: 100px;
left: 0;
background-color: #ccc;
text-align: center;
}
.helper{
display: inline-block;
vertical-align: middle;
height: 100%;
}
img{
vertical-align: middle;
max-width: 90%;
max-height: 80%;
}<body onload="setImgHt()">
<div id = "parentDiv" class="parent">
<span class="helper"></span>
<img id = "imgId" src="http://3d-diva.davidmichaeldesigns.com/images/tree-01.png"/>
</div>
</body>
它也可以通过jquery完成，文档就绪调用现在被调用onLoad的函数。