我在尝试定位我的图像时遇到了一个小问题，它没有按我的意愿显示，我一直在寻找答案几个小时。我希望我的图片显示为箭头点：
我希望这张图片的宽度为 100%，我只是不能让它看起来像我想要的那样。我可以比较它看起来像的壁橱是 facebook 封面图片（顶部的菜单，一个大图像和一些小的 soundclouds 和 facebook，就像我已经拥有的 ;) ）。对不起我的英语：s
----我的html（对不起，如果它不可读，我会根据要求复制和上传所有内容）----
<html>
<head>
<link rel="stylesheet" id="default-css" href="default.css" type="text/css" media="all">
</head>
<div id="cover-image" class="clearfix"></div>
<footer id="site-footer">
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916"></iframe>
<object height="81" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&show_comments=true&auto_play=false&color=343538&theme_color=343538&show_user=true&show_bmp=true&show_artwork=true&show_bmp=true"></param>
<param name="allowscriptaccess" value="transparent"></param>
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F83233916&show_comments=true&auto_play=false&color=343538&theme_color=34353&show_user=true&show_bmp=true&show_artwork=true&show_bmp=true"
type="application/x-shockwave-flash" width="100%"></embed>
</object>
- Control areal -
<div class="plugin_example" id="u_0_9"><div data-href="http://www.facebook.com/DjSalling"data-send="true" data-show-faces="true" data-colorscheme="dark" class="fb-like >dark_background fb_edge_widget_with_comment fb_iframe_widget" fb-xfbml->state="rendered><span width="100%" height="61"><iframe id="f30076c07" name="f2303a14a8" scrolling="no" style="border: none; overflow: hidden; height: 61px; width: 100%;" title="Like this content on Facebook." class="fb_ltr" src="http://www.facebook.com/plugins/like.php?api_key=113869198637480&locale=da_DK&sdk=joey&channel_url=http%3A%2F%2Fstatic.ak.facebook.com%2Fconnect%2Fxd_arbiter.php%3Fversion%3D22%23cb%3Df20c4c7538%26origin%3Dhttp%253A%252F%252Fdevelopers.facebook.com%252Ff5cc88ac%26domain%3Ddevelopers.facebook.com%26relation%3Dparent.parent&href=http%3A%2F%2Fwww.facebook.com%2FDjSalling&node_type=link&width=450&layout=standard&colorscheme=dark&show_faces=true&send=true
&extended_social_context=false"></iframe></span></div></div>
</footer>
</body>
</html>
---- CSS ----
#cover-image {
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#site-footer { position: relative;
position: absolute: bottom;
background: url(footer-divider.png) center top no-repeat;
background-size: 100%;
margin: 0px 0 200px 0;
padding: 27px 0 0;
clear: both;
}
#inner-footer {
position: absolute;
bottom: 0;
left: 0;
}
#inner-footer .content {
color: #bcbcbc;
background: #272729;
background: rgba(0,0,0, 0.15);
background-repeat: no-repeat;
padding: 10px;
height: 72px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
感谢大家 ：）
编辑：
@ 3rror404 谢谢，但是我的宽度是 100%，所以图像缩放会随着浏览器的大小移动并自动从 2560x1600 缩小？
#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-position: left top;
现在高度为 400xp 但甚至无法查看整个图片
正如您在此处看到的，宽度有效，高度无效
@Kamal我使用了你的css，但是当我来回拖动浏览器窗口时，我可以看到图像刚刚被切断，并且在一个狭窄的浏览器窗口中，从声音云到图片有很大的空间。