크기 조정이 가능한 이미지가있는 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/

나는 파이어 폭스와 크롬의 최대 높이 및 최대 폭 권리를 얻을 수있는 방법 두 방향으로 이미지를 연결하는 방법은 무엇입니까?

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