이미지가 부모 크기에 맞지 않습니다.

Question

저는 flexslider를 사용하고 있으며 img를 인라인 블록으로 표시되는 div 내에 배치했습니다. 그런 식으로, 나는 같은 div 안에 다른 요소 (호버 위에있는 버튼)를 포함시킬 수 있고 상대적으로 그 위치를 정할 수 있습니다. Chrome에서는 예상대로 작동하지만 Mozilla에서는 상위 요소에 설정된 높이 또는 너비 제한을 무시하고 전체 크기로 표시합니다. 문제를 모방 한 빠른 코드 팸입니다.
http://codepen.io/spylefkaditis/pen/HysBi

다시 Chrome에서 작동하지만 Mozilla에서는 정상적으로 작동합니다. 아이디어가 있으십니까?

HTML :

<ul> 
    <li> 
    <div class="image"> 
     <img src="http://lorempixel.com/1200/1800/" alt="" /> 
<!--  <a href="#" class="btn">button</a> 
     <div class="modal"> 
     <p class="message"></p> 
     </div>--> 
    </div> 
    </li> 
</ul> 

SCSS :

.image{ 
    position:relative; 
    display:inline-block; 
    text-align:center; 
    height: inherit; 
} 

을 그렇지 않으면, 다음과 같이

*{ 
    box-sizing:border-box; 
} 
html,body{ 
    height:100%; 
    width:100%; 
} 

ul{ 
    margin:0; 
    padding: 0; 
    width: 100%; 
    height:100%; 
    list-style-type:none; 


    li{ 
    display:inline-block; 
    position:relative; 
    height:100%; 
    width: 100%; 
    text-align:center; 

    .image{ 
     position:relative; 
     display:inline-block; 
     text-align:center; 

     img{ 
     display: inline-block; 
     max-height:100%; 
     width:auto; 
     } 
/*  
     .btn{ 
     position:absolute; 
     left:0; 
     bottom:0; 
     background-color:black; 
     } 
     */ 
    } 
    } 
} 

Answer 1

당신은 .image 요소에 높이 값을 설정해야 div.image은 콘텐츠 (이 경우에는 큰 이미지)를 수용 할 수 있도록 높이를 확장합니다. 나는 파이어 폭스와 크롬이를 테스트하고 괜찮 작동하는 것 같다 http://codepen.io/anon/pen/Hptco

:에

참조 데모.