배경 설정 : 자바 스크립트

Question

이미지를 배경으로 설정할 때 컨테이너의 크기에 따라 이미지의 크기를 조정하는 데 문제가 있습니다.

#container { 
    position: relative; 
    height: 400px; 
    width: 600px; 
    left: 15%; 
    border: 1px solid black; 
    margin: 0; 
    background-repeat: no-repeat; 
} 
<script language="JavaScript"> 
    function option1() { 
    background="url('image.png')"; 
    document.getElementById('container').style.backgroundImage = background; 
    } 
</script> 
. 
. 
. 
. 
<a href="#" id="b1" onclick ='option1()'>x</a> 

기본적으로 내 링크 (x가 됨)를 클릭하면 컨테이너의 배경이 변경됩니다. 이미지의 크기가 모두 다르므로 함수를 호출 할 때 컨테이너에 맞게 이미지를 변경하거나 크기를 조정하는 방법을 찾으려고합니다. 나는 아무것도 포기하지 않고 이미지 편집기에서 각 이미지를 컨테이너 크기로 수동으로 크기를 조정했습니다. 이것 주위에 다른 방법이 있습니까? 나는 Javascript에 익숙하지 않고 다른 코드를 살펴 보았지만 때로는 나를 루프에 던지기도했다.

background-size:100% auto; 

이

이미지가 컨테이너의 너비를 채울 것입니다, 그 높이가 비율에 확장 할 수 다음 적절한 CSS의 존재로 http://jsfiddle.net/Shmiddty/Akypk/

:

__________________________________________ 
|          | 
|          | 
|          | 
|__________________________________x_x_x_| 

Answer 1

현재 작업에서 볼 수 있습니다 .