好的,这有点啰嗦并且非常具体。我会尽力解释!
目标是在保持图像纵横比的同时,使其按比例缩放,并保持其在仅由百分比定义的DIV中垂直和水平居中。图像需要保持最佳适合度,因此如果需要最大宽度,则使用它,反之亦然。
使用Firefox版本33(或早期几个版本)查看这个js fiddle以使其正常工作:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
问题:
我最初在stackoverflow上找到了我的代码,并对.centered类添加了max-height/width的简单修改。当时,这在所有主要浏览器中都有效,唯一的例外是Opera。
然而,有一个很大的问题:Chrome的最新版本(版本38.0.2125.111)不再支持此代码,而我的用户更喜欢Chrome而不是其他浏览器。
有什么解决办法吗?这是Chrome的一个bug吗?我愿意接受javascript建议以使其再次正常工作。