Question

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

html - ＆gt;

<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-＆GT;

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

Answer 1

你有没有尝试百分数？

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

身高可能会变得棘手...

Answer 2

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

您可以做的是将元素的宽度和高度设置为背景图像。另请查看以下链接：background-size，CSS3 backgrounds，CSS3 background-size。

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

div的背景图象不适合在屏幕

2 个答案: