依附保证金在div

这是我第一次使用这个论坛，我非常高兴地在这里找到我的答案，而不用问自己。所以，如果我犯了任何错误，我表示歉意。我想要做的是以下几点：我有一个头，适合通过CSS的窗口大小（100％）。（高度通过jQuery改变，但我不认为这与这个问题有关）。在这个头文件中我有一个图像，我希望它在屏幕中间。这样的（我不能把图像在这个论坛）：依附保证金在div

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

正如你可以看到这个工作得很好，但是当我加载页面的第一次，它隐藏了太多的图像，以便我得到和右侧的空白空间。

有谁知道我在做什么错？

来源

2012-10-03 T-mo-T

更好地使用'viewport'元标记 –

这条线看起来有点疯狂：'$ margin = $ margin - $ margin - $ margin;'你想在这里实现什么？ –

另外，不要在变量上使用'$'前缀，除非它是一个jQuery对象 – Johan

我不确定我是否真的了解你，但如果你只需要在屏幕中间居中显示一张图片，你可以使用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-03 14:18:36

尤其是图像被命名为headerbg。jpg，它可能使更多的意识成为背景图像。 –

这是我的标题部分的背景图像。据我所见，css解决方案效果很好。旧版浏览器呢？ –

Eh T-mo-T这是一个标准的解决方案，这将适用于所有浏览器。你没有需要JavaScript的解决方案这样容易... –

我想出了以下基于代码David Slavik提到的代码。再次感谢您的解决方案David。

<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-04 07:55:08

依附保证金在div

回答

相关问题