Foundation 반응 형 웹 디자인

Question

저는 기초를 실험하고 있습니다. 링크 :

<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div> 

이 190에 상관없이 브라우저 크기 190 픽셀에 높이를 말한다 내가 설정하면,하지만 난 하다며 높이 100 %를 설정 한 경우에만 표시입니다 : http://foundation.zurb.com/docs/index.php

나는 아주 간단한 사업부있어 50 px 이미지. 배경 이미지가 될 현재 사이트에서 많은 것들을 사용하지만, 또한 반응이 좋은 높이를 원합니다. 어떻게해야합니까? 내가 190 픽셀로 높이를 설정하면

Answer 1

<div style="background:url(gymBasketballHoops.jpg);height:100%;">&nbsp;</div> 

는 190에 상관없이 브라우저 크기, 하지만 하다며 100 % 높이를 설정하면 그건 단지 이미지의 50 픽셀을 표시했다. 당신의 HTML/CSS의 나머지 부분을 보지 않고

, 나는

190px

는 고정 된 크기입니다 ... 다음보다 더 아무것도 추천 할 수 없습니다와 상관없이 브라우저 또는 해상도 190 픽셀 높이 수 없습니다.

100%은 외부 용기에 대한 크기가 div이고, 내용량이 이 아니고, 내용량이입니다. 바깥 쪽 컨테이너의 높이가 500 픽셀이면 <div>은 100 퍼센트가됩니다. <div> 이후

가  을 제외하고 비어있는, 당신이 크기를 설정하거나 단지 지정된 크기 않고 그래서  를 동봉하기에 충분히 큰 것, 그것은 단지 내용의 크기에 반응 할 것이다.

따라서 외부 컨테이너를 기준으로 백분율을 설정할 수 있으며 고정 된 높이를 설정하거나 내용을 그대로두고 콘텐츠의 높이를 지정할 수 있습니다.