Question

这是我第一次使用这个论坛，但是我总是在不问自己的情况下在这里找到我的答案。所以，如果我犯了任何错误，我道歉。我想要做的是以下内容：我有一个标题适合窗口大小（100％）通过CSS。（高度通过jquery改变，但我认为这与此问题无关）。在这个标题中我有一个图像，我希望它在屏幕中间的中间。像这样（我不允许在这个论坛上放置图像）：

 <----------------image------------------>
 __________ ____________________ __________
|          |                    |          |
|  REST    |                    |   REST   |
|        IM|AGE  IMAGE IMAGE  IM|AGE       |
|__________|____________________|__________|
           |                    |
           |____________________|
             <-----screen------>

REST = not visible (outside the screen)

因此，如果屏幕更大，它会显示更多的图像，但它仍然会在中间完美对齐。到目前为止，我所做的一切进展顺利。

制作以下代码：

 <div id="header">
    <div id="header_bg"><img src="pics/headerbg.jpg" id="stretch"></div>
    <div id="logo">
            <div class="logo"><img src="pics/logo.png" width="401" height="174"></div>
    </div>
 </div>

和jquerycode：

if ( $("#stretch").width() > $(window).width()  ) {
            $screen = $(window).width();
            $pic = $("#stretch").width();
            $rest = $pic - $screen;
            $margin = $rest /2;
            $margin = $margin - $margin - $margin ;
            $('#stretch').css({'margin-left':($margin)+'px'});
        }

正如你所看到的，这种方法很好但是当我第一次加载页面时，它会隐藏太多的图像，这样我就可以在右侧获得并清空空间。

有谁知道我做错了什么？

Answer 1

我不确定我是否真的了解你，但如果你只需要在屏幕中间有一张图片，你就可以使用带有中心位置的Css属性背景。

<style>
   #header_bg { background: url('pics/headerbg.jpg') no-repeat center 0; }
</style>

 <div id="header">
    <div id="header_bg">&nbsp;</div>
    <div id="logo">
            <div class="logo"><img src="pics/logo.png" width="401" height="174"></div>
    </div>
 </div>

Answer 2

我提到了以下基于David Slavik之前提到的代码的代码。再次感谢您的解决方案大卫。

<style>
  #header_bg { 
    background: url('../pics/headerbg.jpg') no-repeat center center;
    -webkit-background-size: cover; /*for webKit*/
    -moz-background-size: cover; /*Mozilla*/
    -o-background-size: cover; /*opera*/
    background-size: cover; /*generic*/ }
</style>

此代码确保如果图像较小，则div的高度会稍微延伸。谢谢大家的回答。对我来说，这个话题已经结束了。

div中的相关保证金

2 个答案: