화면에 맞지 않는 div의 배경 이미지

-1

여기 내 코드가 있습니다. 사용자가 링크를 클릭하면 div 태그에 배경 이미지를 표시하려고합니다. 하지만 내 배경 이미지가 화면에 맞지 않습니다 (아래 그림과 같이 CSS의 높이와 너비를두면 적어도 전체 이미지를 표시 할 수 있지만 화면 밖으로 나갈 것입니다). CSS에서 height 및 width 속성을 제거하면 이미지가 전혀 표시되지 않습니다.화면에 맞지 않는 div의 배경 이미지

HTML ->

<body> 
<div> 
<ul> 
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">IT Spend</a></li> 
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">Assessments</a></li> 
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">Information</a></li>  
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2012'">2012</a></li> 
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2013'">2013</a></li> 
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2014'">2014</a></li> 
<li><a href="#none" onclick="document.getElementById('wrapper').className ='IT_Spend_2015'">2015</a></li>

</div> 
<div id="wrapper" class="IT_Spend_2012"'></div> 
</body>

css->

#wrapper { background-repeat: no-repeat; width:1500px; height:1100px;} 
.IT_Spend_2012 { background-image: url('./img/IT_Spend2012.jpg'); } 
.IT_Spend_2013 { background-image: url('./img/IT_Spend2013.jpg'); } 
.IT_Spend_2014 { background-image: url('./img/IT_Spend2014.jpg'); } 
.IT_Spend_2015 { background-image: url('./img/IT_Spend2015.jpg'); }

출처

2014-06-18 user3749027

배경 위치 : 왼쪽 상단; background-repeat : no-repeat; background-size : auto; 또는 수동으로 크기를 지정할 수 있습니다. (내가) – VikingBlooded

당신이 퍼센트를 시도?

#wrapper { background-repeat: no-repeat; width:100%; height:100%;}

높이

출처

2014-06-18 20:42:27 briansol

안녕하세요, 귀하의 회신에 감사드립니다. 나는 이것을 시도했다. 그러나 내가 이것을 할 때 이미지가 전혀 표시되지 않는다. 또한 어떻게 대응할 수 있을까요? 나는 다양한 화면 해상도와 크기에 맞출 수 없다. – user3749027

배경 이미지는이 요소의 배경에 인쇄, 배경 이미지입니다 ... 여기에 까다로운받을 수 있습니다. 요소 자체는 배경에 따라 크기가 조정되지 않습니다.

당신이 할 수있는 일은 요소의 너비 & 높이를 배경 이미지의 높이로 설정하는 것입니다. background-size, CSS3 backgrounds, CSS3 background-size도 확인해주세요.

background-size: cover을 사용하려는 경우 div를 표시하는 div가 동일한 너비 인 & 가로 세로 비가 아닌 이상 위의 "background-size"링크처럼 이미지가 완전히 보이지 않을 수 있습니다 이미지로.

출처

2014-06-18 20:47:37 Linek

화면에 맞지 않는 div의 배경 이미지

답변

관련 문제