2

这是我第一次使用这个论坛，通常我总是在这里找到我的答案而无需自己询问。因此，如果我犯了任何错误，我深表歉意。我正在尝试做的是以下内容：我有一个通过 css 适合窗口大小（100%）的标题。（高度通过 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>

和jQuery代码：

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'});
        }

如您所见，这很好用，但是当我第一次加载页面时，它隐藏了太多图像，因此我在右侧得到了空白空间。

有谁知道我做错了什么？

4

2 回答 2

2

我不确定我是否真的理解你，但如果你只需要在屏幕中间有一张图片，你可以使用 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>
于 2012-10-03T14:18:36.123 回答
0

我提出了以下代码，它基于之前提到的代码 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 的高度，它会稍微拉伸。谢谢大家的回答。对我来说，这个话题已经结束。

于 2012-10-04T07:55:08.683 回答