CSS가있는 페이지에 맞게 div 및 배경 이미지 크기 조정

Question

백그라운드에서 이미지가 포함 된 내 페이지에 두 개의 div가 있어야한다고 가정합니다 (예 : http://www.ubudhanginggardens.com/). 내 div의 크기를 설정하는 방법을 알고 있지만 문제는 웹 브라우저를 작게 만들면 배경 이미지가 그대로 유지된다는 것입니다. 웹 브라우저에서 배경 이미지를 위/아래로 확대하고 싶습니다. 브라우저로 이미지 크기를하고 싶은 경우

CSS

body, html { 
    height: 100%; 
    width: 100%; 
    margin: 0px; 
} 
#container1 { 
    float: left; 
    height: 100%; 
    width: 50%; 
    background-image: url(../img/1.png); 
} 
#container2 { 
    float: left; 
    height: 100%; 
    width: 50%; 
    background-image: url(../img/2.png); 
} 

Answer 1

는 픽셀 수로 정의하는 대신 %로 폭을 설정합니다.

그래서 당신이 원하는 경우 이미지는 항상 사업부의 절반을 커버하는 : 당신이 당신의 브라우저 창 크기를 변경할 때, 이미지의 크기가 변경됩니다

<div class="my_div"> 
    <img src="http://example.com"></img> 
</div> 
<style> 
    .my_div .image { 
     width:50%; 
    } 
</style> 

. Twitter's Bootstrap과 같은 반응 형 CSS 프레임 워크를 살펴보고이 동작을 정확하게 수행하는 데 도움이 될 수 있습니다.

Answer 2

순수 CSS로 수행 할 수 있으며 미디어 쿼리가 필요하지 않습니다.

이미지를 유연하게 만들려면 max-width:100% 및 height:auto을 간단하게 추가하십시오. 이미지 max-width:100% 및 height:auto은 IE7에서는 작동하지만 IE8에서는 작동하지 않습니다 (예, 다른 이상한 IE 버그). 이 문제를 해결하려면 IE8에 width:auto\9을 추가해야합니다.

Source

CSS :

img { 
    max-width: 100%; 
    height: auto; 
    width: auto\9; /* ie8 */ 
} 

그리고 이미지의 고정 된 최대 폭을 적용 할 경우, 단지 예를 들어, 컨테이너 내부에 배치 :

<div style="max-width:500px;"> 
    <img src="..." /> 
</div> 

jsFiddle example here . 자바 스크립트가 필요하지 않습니다. Chrome, Firefox 및 IE의 최신 버전에서 작동합니다 (테스트 한 모든 것).