帶有可調整大小的圖像的flexbox列

Question

我正嘗試在中間Flex項目中使用可調整大小的圖像（帶鏈接）構建flexbox佈局。圖像彈性項目應該根據瀏覽器窗口進行縮放，其他項目的大小與內容一樣大，但高度固定。

我希望圖像在兩個方向居中，並且具有大約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和鉻的最大高度和最大寬度權以及如何在兩個方向上將鏈接與圖像鏈接在一起？

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%; 
}