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

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

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

출처

2011-03-26 Kevin L.

브라우저?

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

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

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

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

출처

2011-03-26 22:24:33 kmiyashiro

나는 질문을 게시 할 때 내가 브라우저 접두사를 제거; 나는 그들을 지금 복원했다. 아직도 크기를 재조정하지 않습니다. –

그래, 네가 맞아. flexbox 모델이 블록 모델처럼 행동하지 않는 것처럼 보입니다. 각 상자 안의 요소가 부모를 늘릴 수있는 표준 표 레이아웃과 같이 작동하는 것 같습니다. 창 크기를 조정하십시오. http://jsfiddle.net/kmiyashiro/RFqPM/3/ – kmiyashiro

예. 디스플레이 내에서 자식 이미지의 크기를 100 %로 조정하는 방법에 대한 아이디어 : 상자? –

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

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

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

출처

2011-05-15 21:04:57 Flanders

이 그렇게 대답으로 업데이트하고 싶어하지만, 여전히 검색에 표시, 오래된 질문이다 수여 : 크롬 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%; 
    }

출처

2013-02-20 14:36:18 Jimmerz28

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

답변

관련 문제