Question

我在试图定位我的图像时出现了一些问题，它并没有像我想要的那样显示，而且我一直在寻找答案几个小时。我希望我的照片显示为箭头点： enter image description here 我希望这个图像的宽度为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&amp;show_comments=true&amp;auto_play=false&amp;color=343538&amp;theme_color=343538&amp;show_user=true&amp;show_bmp=true&amp;show_artwork=true&amp;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&amp;show_comments=true&amp;auto_play=false&amp;color=343538&amp;theme_color=34353&amp;show_user=true&amp;show_bmp=true&amp;show_artwork=true&amp;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&amp;locale=da_DK&amp;sdk=joey&amp;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&amp;href=http%3A%2F%2Fwww.facebook.com%2FDjSalling&amp;node_type=link&amp;width=450&amp;layout=standard&amp;colorscheme=dark&amp;show_faces=true&amp;send=true
&amp;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，但是当我来回拖动我的浏览器窗口时，我可以看到图像被切断，在一个狭窄的浏览器窗口中，从声音云层到图片有一个很大的空间。

Answer 1

我不确定我是否按照你的问题进行了..但你的意思是你设置为背景属性的图像应该扩展到容器的宽度吗？

#cover-image {
width: 100%;
height: 400px;
background-image: url(background_cover.jpg);
background-repeat: no-repeat;
background-size:100%;
background-position: left top;

应该使您的背景图片宽度适合容器宽度..这是您要找的吗？

Answer 2

如果我正确理解了您的问题，您需要background-size: cover

#cover-image {
    height: 400px;
    background: url(background_cover.jpg) center center;
    background-size: cover;
}

这将强制您的背景图像覆盖整个容器，同时保持纵横比并保持水平和垂直居中。

DEMO（调整浏览器大小）

编辑

好的，如果您不关心使用纵横比，请使用background-size: 100% 100%

#cover-image {
    height: 400px;
    background: url(background_cover.jpg);
    background-size: 100% 100%;
}

这会将背景图像缩放到容器的100％高度和100％宽度，即使这意味着拉伸或挤压图像。

DEMO

CSS和图像错误 - 不显示图像

2 个答案: