好吧,这有点拗口,而且非常具体。我会尽力解释!
目标是在缩放图像时保持纵横比,并使其在仅由百分比定义的 DIV 内保持垂直和水平居中。图像需要保持最佳拟合,因此如果需要最大宽度,则使用它,反之亦然。
Use Firefox 版本 33(或一些早期版本)查看这个 js fiddle 以查看它是否正常工作:
http://jsfiddle.net/3vr9v2fL/1/ 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 上找到了我的代码,并制作了一个简单的 mod,将 max-height/width 添加到 .centered 类中。当时,这适用于所有主流浏览器。唯一的例外是歌剧。
将 div 内的图像与响应高度垂直对齐 https://stackoverflow.com/questions/18516317/vertically-align-an-image-inside-a-div-with-responsive-height
然而,有一个大问题:最新版本的 Chrome(版本 38.0.2125.111)不再适用于此代码,而且我的用户比其他浏览器更喜欢 Chrome。
关于如何解决这个问题有什么想法吗?这是 Chrome 的错误吗?我愿意接受 javascript 建议,让这项工作再次发挥作用。