Fatal编程技术网
  • javascript/
  • Javascript div的背景图像不适合屏幕

Javascript div的背景图像不适合屏幕

javascript html css image

Javascript div的背景图像不适合屏幕,javascript,html,css,image,background,Javascript,Html,Css,Image,Background,这是我的密码。我试图在用户点击链接时以div标记显示背景图像。但我的背景图像不适合屏幕（将高度和宽度放在css中，如下所示，至少可以让我显示整个图像，但它超出了屏幕）。如果我从css中删除了height和width属性，那么图像根本不会显示 html-> <body> <div> <ul> <li><a href="#none" onclick="document.getElementById('wrapper').className ='I

这是我的密码。我试图在用户点击链接时以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>
你试过百分比吗

 #wrapper { background-repeat: no-repeat; width:100%; height:100%;}
高度在这里可能会变得棘手…

背景图像是背景图像，它打印在元素的背景上。元素本身不按背景调整大小

您可以将元素的宽度和高度设置为背景图像的宽度和高度。 同时检查以下链接：

如果您要使用
背景尺寸：封面
，请记住，您的图像不会像上面的“背景尺寸”链接中那样完全可见，除非您显示它的div具有与图像相同的宽高比。

背景位置：左上；背景重复：无重复；背景尺寸：自动；或者您可以手动为其指定大小。（我想）嗨，谢谢你的回复。我试过了，但是当我这样做的时候，图像根本没有显示出来。此外，我如何使其响应。我无法使其适合各种屏幕分辨率和大小。 
#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'); }

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