我正在尝试从头开始构建一个网站，以匹配我想要的自定义外观；但是，我想出了一些与刚开始相关的问题。我想用图像填充一个 div 元素；但是，该图像被截断了(我希望它显示整个图像而不进行裁剪)。另外，我希望它能够响应；所以我不想使用 px。当我使用百分比时，虽然没有任何显示。如何缓解我遇到的这两个问题？
这是我正在处理的 JSFiddle:JSFiddle
我知道让它响应需要百分比或 em；我将如何使它响应？当我将宽度和高度都更改为 100% 时，我的图像消失了。
另外，为什么当宽度为 100% 且高度为 800px 时，宽度只响应某个点？
谢谢
HTML
<body>
<div id="Banner">
<div id="Menu">
</div>
</div>
</body>
CSS
#Banner
{
width: 900px;
height: 400px;
background-image: url("../header.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
CSS
/* Resets (http://meyerweb.com/eric/tools/css/reset/ | v2.0 | 20110126 | License: none (public domain)) */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none}
/* Box Model */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Container */
body {
/* min-width: (containers) */
min-width: 1200px;
}
.container {
margin-left: auto;
margin-right: auto;
/* width: (containers) */
width: 1200px;
}
最佳答案
再添加 100%:
background-size: 100% 100%;
看看它们如何为您服务。
Edited JS Fiddle that shows what you want to achieve.
More on background size
关于HTML 和 CSS 背景问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26167145/