액체 레이아웃 : 최대 너비 100 % 적용되지 않음 - 이유는 무엇입니까?

Question

나는이 액체 배치 재료에 완전히 새롭다. 저는 대부분의 레이아웃 구성 요소가 "액상화"되지만 불행하게도 이미지는 그렇지 못합니다.

그래서 여러 곳에 제안 된대로 이미지에 max-width: 100%을 사용하려고합니다.

그러나, 및 max-width와 IMG 용기의 min-height의 정의,가 확장되지 않는 IMG에도 불구하고.

넓은 해상도에서 보는 경우 "어린이 이미지"가 축척되지 않음을 알 수 있습니다.

문제의 원인에 대한 단서, 왜 이미지의 크기가 변하지 않습니까?

테스트 케이스 :

브라우저 : 파이어 폭스 15.0/21.0

IOS 크롬 : MAC OS X 라이온 - 10.7.3

해상도 : 1920x1200의

내가 얻는 것 : 나는 그 컨테이너의 끝까지 비례하지 않는 이미지를 얻는다. img 너비가 포함 된 요소 article에 맞지 않습니다. 내가 기대하는 무엇

는 : 그것은 컨테이너의 끝에 도달 할 때까지 나는 이미지가 확대 될 전망이다. 시각적으로 이미지의 오른쪽이 아래 단락의 오른쪽과 수직으로 정렬 된 상태로 이미지가 바로 아래 단락만큼 넓어지기를 기대합니다.

Answer 1

무엇을 max-width이 오해한다고 생각합니다.

max-width:100%은 "이 요소의 최대 너비는 컨테이너의 100 %입니다."를 의미합니다. 자연적으로 더 작은 것은 영향을받지 않습니다. 그게 네가 지금하고있는 일이야. 제대로 작동하고있어. max-width:800px을 사용했다면 "이 이미지의 너비가 800px 이상이되도록하지 마십시오."는 의미 일 것이고, 너비가 800px가 아니어도됩니다. 즉, width입니다.

width:100%은 "이 요소는 항상 컨테이너의 너비가 100 %이어야합니다"를 의미합니다. 일반적으로 더 작은 것이 이제는 전체 폭을 차지해야합니다. 큰 것은 컨테이너의 폭으로 축소됩니다.

귀하의 경우 실제 크기에 맞게 실제 이미지의 크기를 조정하고 width:100%을 사용하십시오 (컨테이너의 적절한 최대 너비를 선택하십시오). 이미지는 일반적으로 크기가 축소 된 것보다 잘 보이지만, 모바일 장치를 최적화 할 때 반대의 경우가 있습니다.

일반적으로 max-width:100%이 기본 스타일로 표시되는 이유는 이미지가 보통 실제 너비로 자연스럽게 크기가 지정되므로 이미지가 해당 컨테이너 너머까지 확장되어 레이아웃이 깨지지 않기 때문입니다.

까지 내가 300 픽셀 폭의 이미지가있을 경우 내 understaning가 consern 같이

Answer 2

나를 위해 귀하의 이미지는 뷰포트의 크기를 조정하면서 확대됩니다. 그러나 max-width 대신에 너비를 사용하십시오. 그러나 그것은 둘 다 작동합니다.

Answer 3

이제 본 이미지는 그 폭의 40 %를 말하는 DIV 내부 (화상 수단 300 픽셀 너비와 같은 생성) 그 컨테이너 내 경우에는 몸집입니다

만약 내 img widht : 100 % 내 div가 500px (전신 너비의 40 %) 너비 내 이미지는 컨테이너와 같은 너비의 것입니다 말은 (제 경우에는 div). 내가 IMG 최대 폭을 줄 경우

은 : 100 %는

최대-widht 정말 유지하는 데 도움이 (가 만들어 졌을 때 다른 단어에 지금까지 원래의 폭이 무엇) 내 이미지의 최대 너비는 항상 300 픽셀된다는 뜻입니다 px 이미지의 선명도