html - 具有可调整大小图像的 flexbox 列

Question

我正在尝试在中间的 flex 元素中构建一个带有可调整大小的图像(带有链接)的 flex 盒布局。图像 flex 元素应该可以根据浏览器窗口进行缩放，其他元素与其内容一样大，但高度固定。

我希望图像在两个方向上都居中，并且最大高度和最大宽度大约为 95%，以便在浏览器窗口变小时缩小。

html:

<div id="flexbox">
    <div id="flex-1">1</div>
    <div id="flex-2">2</div>
    <div id="flex-3">
        <div id="zoom">
            <a href="http://xy.de">
                <img src="http://250kb.de/u/140905/j/lCdCSjetSUXb.jpg" alt="x" />
            </a>
        </div>
    </div>
    <div id="flex-4">4</div>
</div>

CSS:

html,body{
    height:100%;
    margin:0;
    padding:0;
}
#flexbox { 
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-direction: column;
    height:100%;
    width:100%;
    background:red;
}
#flex-1{
    border:1px solid lightblue;
}
#flex-2{
    border:1px solid lime;
}
#flex-3 {
    border:1px solid yellow;
    flex:1;
    justify-content:center;
}
#flex-4 {
    border:1px solid pink;
}
#zoom{
    background:white;
    width:100%;
    height:100%;
    text-align:center;
}
#zoom a{
    height:90%; 
}
#zoom img{
    max-width:90%;
    max-height:90%;
}

这是一个 jsfiddle: http://jsfiddle.net/haheute/67py8zez/4/

如何在 Firefox 和 Chromium 中获得正确的最大高度和最大宽度，以及如何使链接与图像在两个方向上居中？

Answer 1

这是一个解决方案:http://jsfiddle.net/mfwr0fcm/ .

HTML:

<div id="flexbox">
    <div id="flex-1">1</div>
    <div id="flex-2">2</div>
    <div id="flex-3">
        <a href = "#"><img src="http://250kb.de/u/140905/j/lCdCSjetSUXb.jpg" alt="x" /></a>
    </div>
    <div id="flex-4">4</div>
</div>

CSS:

* {
    margin: 0;
    padding: 0;
}

html, body, #flexbox {
    height:100%;
}

#flexbox { 
    display: -webkit-flex;
    display: -moz-flex;  
    display: flex;
    flex-direction: column;
    background:red;
}

#flexbox > * {
    flex: 0 0 auto;
    border: 1px solid #000;
}

#flex-3 {
    flex: 1 1 auto;
    position: relative;
}

#flex-3 img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    max-width: 95%;
    max-height: 95%;
}