div 的背景图片不适合屏幕答案

【问题标题】：Background image of div not fitting in screendiv 的背景图片不适合屏幕
【发布时间】：2014-06-19 04:47:37
【问题描述】：

这是我的代码。我正在尝试在用户单击链接时在 div 标签中显示背景图像。但是我的背景图像不适合屏幕（如下所示在 css 中放置高度和宽度至少可以让我显示整个图像，但它会超出屏幕）。如果我从 css 中删除 height 和 width 属性，则根本不会显示图像。

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'); }

【问题讨论】：

背景位置：左上角；背景重复：不重复；背景尺寸：自动；或者你可以手动给它一个大小。（我愿意）

标签： javascript html css image background

【解决方案1】：

你试过百分比吗？

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

这里的高度可能会变得棘手......

【讨论】：

您好，感谢您的回复。我试过这个，但是当我这样做时，图像根本没有显示出来。另外，我如何使它响应。我无法使其适应各种屏幕分辨率和尺寸。

【解决方案2】：

背景图片是背景图片，打印在元素的背景上。元素本身不会根据背景调整大小。

您可以将元素的宽度和高度设置为背景图像。还要检查这些链接：background-size、CSS3 backgrounds、CSS3 background-size。

如果您要使用background-size: cover，请记住，您的图像不会像上面的“背景大小”链接中那样完全可见，除非您显示它的 div 具有相同的宽高比图片。

【讨论】：