保持宽高比例缩放图片，然后在流体高度和宽度的 DIV 中垂直水平居中。

Question

好的，这有点啰嗦并且非常具体。我会尽力解释！

目标是在保持图像纵横比的同时，使其按比例缩放，并保持其在仅由百分比定义的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。

如何在具有响应式高度的div内垂直对齐图像

然而，有一个很大的问题：Chrome的最新版本（版本38.0.2125.111）不再支持此代码，而我的用户更喜欢Chrome而不是其他浏览器。

有什么解决办法吗？这是Chrome的一个bug吗？我愿意接受javascript建议以使其再次正常工作。

- photocode

Answer 1

我想把这个分享给你：JSFiddle - 在可调整的流体容器中保持居中图像的宽高比。

.container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.image {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
body {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
}

<div class='container'>
    <img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>

标签中的图片保持水平和垂直居中。如果窗口缩小，图像会按比例缩小并保持原始宽高比。

虽然我没有在所有浏览器上进行测试。

- Paull

---

我使用了相同的解决方案。但是在大屏幕上，图像并没有占据容器的全部宽度/高度。如果您能修改您的答案那就太好了。 - Aamu

Answer 2

看一下CSS object-fit属性：

虽然对于旧浏览器可能需要polyfill,

查看object-fit的浏览器支持情况。

- Maxim Y