img 너비가 100 %로 표시됩니다. 상자 (css flexbox parent)

Question

이미지의 크기를 부모 div의 너비로 조정하려고합니다. 일반적으로 width: 100%;은 잘 작동하지만 부모가 display: box; 인 경우 img의 크기가 조정되지 않습니다. 하위 이미지에 box-flex: 1을 부여해도 아무 효과가 없습니다.

<div style="display: -webkit-box; -webkit-box-pack: center; width: 100%;"> 
    <img src="foo.jpg" style="-webkit-box-flex: 1;" /> 
</div> 

Answer 1

브라우저?

나는 공급 업체 접두사없이 flexbox 사양을 지원하는 브라우저를 알지 못합니다.

display: -moz-box; 및 display: -webkit-box;는

사실, 난 그냥 다시 코드를 보았다 등 ... 당신이 이미지에 플렉스 사용하는 경우 플렉스 동적 폭을 정의하기 때문에, 당신은 폭 선언이 필요하지 않습니다.

또한 상위 div의 너비를 정의해야합니다.

Answer 2

은 아마 당신은이 문제를 해결 한,하지만 당신은 사용할 수 있습니다

IMAGE { 
    display: -moz-box; 
    -moz-box-flex: 1; 
} 
#cont { 
    -moz-box-orient: horizontal; 
    display: -moz-box; 
} 

(모질라에 대한 예를 제공) 예제를 테스트하지 않은 최악의 경우 일부 형식에 설정을 몇을해야하지만, 난 확신 해요 맞아.

Answer 3

이 그렇게 대답으로 업데이트하고 싶어하지만, 여전히 검색에 표시, 오래된 질문이다 수여 : 크롬 23, 파이어 폭스 박 레이아웃은 크기의 이미지를 유지하기 위해 노력 21.0a1에서 현재

부모 div 및 크기 조정 (가운데 유지와 함께)

http://jsfiddle.net/qAErr/

HTML

<section id="holdMe"> 
    <div> 
    <img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" alt="html5"/> 
    </div> 
</section> 

CSS

#holdMe { 
     display: -webkit-flex; 
     display: -moz-flex; 
     display: -ms-flex; 
     display: -o-flex; 
     display: flex; 
     -webkit-justify-content: center; 
     -moz-justify-content: center; 
     -ms-justify-content: center; 
     -o-justify-content: center; 
     justify-content: center; 
    } 
    #holdMe img { 
     width: 100%; 
    }