2013-04-07 4 views
0

너비가 820 픽셀 인 div 안에 100 % 너비의 이미지가 있습니다. 이미지를 iPad 및 iPhone 5의 화면 크기로 축소하면 이미지의 크기가 줄어들지 만 해당 크기에서는 이미지가 화면 크기 너비의 100 %가됩니다.미디어 쿼리의 너비가 100 % 인 이미지

이미 미디어 쿼리에서 너비를 100 %로 사용하려고 시도했지만 이미지의 너비가 전체 너비에 맞지 않습니다.

태블릿 및 스마트 폰에서 전체 화면 너비로 이미지를 반응시키는 것이 가장 좋습니다. 최대 너비가 960 픽셀 인 격자 (골격 격자 : http://www.getskeleton.com/)를 사용하고 있음을 고려하면

감사합니다.

+0

미디어 쿼리를 제대로 사용하는 경우 이미지 **는 100 %로 확장되지만 부모 요소에 비례합니다. 따라서 이미지의 부모는 작은 해상도에서 100 % 효과를냅니다. –

+0

부모 이미지가 너비가 820px 인 div이고이 div의 너비가 960px 인 부모 div가있는 경우 미디어 쿼리를 사용하여이 세 요소의 너비를 100 %로 정의합니까? – swayziak

+0

그런 것. 이미지 너비를 화면 크기의 100 %로 설정하려면 모든 부모가 100 % 너비를 가져야합니다. 블록 요소의 너비가 정의되지 않은 경우 너비는 기본적으로 100 %입니다. –

답변

0

너비 100 %의 이미지는 부모의 너비의 100 %가됩니다. 따라서 부모님이 820 픽셀 너비라면 이미지가 얼마나 넓은 지 알 수 있습니다. 부모가 960 픽셀 너비이면 이미지의 너비가 넓어집니다.

미디어 쿼리에서 상위 div의 너비를 변경해야합니다 (이미지를 100 % 너비로 설정했을 때와 동일).

+0

그래서 HMTL에서이 구조를 가지고 있음을 고려 :

을, 만
는 폭이 정의하지 않습니다, 나는 2 DIV 년대의 폭을 변경해야 및 미디어 쿼리에서 img? 나는 너비 너비 최대 너비도 변경합니까? – swayziak

+0

맞습니다. 일반적으로 모바일 크기로 내려 가면 레이아웃이 유동적이됩니다. 기본적으로 모든 div와 img는 100 % 너비로 설정됩니다. 원한다면 최대 너비를 변경할 수 있습니다. 원하는 너비에 따라 다릅니다. – Fernker

관련 문제