CSS小屏幕上的图片几乎在顶部，在大屏幕上更多在中间

基本上我想要的是当屏幕分辨率上升时，图片“内容”向下移动到中心位置。这可能吗？CSS小屏幕上的图片几乎在顶部，在大屏幕上更多在中间

// HTML

<html> 
<head> 
<title>BBQ day</title> 
<link href="CSS/stylesheet.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
    <div class="container"> 
     <div class="content"></div> 
    </div> 
    <div class="powerd"></div> 
</body> 
</html>

// CSS

body{ background-color:#000;} 

.container{ position:relative; width:100%; height:auto;} 
.content{background-image:url('../images/BO_BBQdag-webt_03.jpg'); width:768px; height:607px; margin-left:auto; margin-right:auto; margin-top:0px 0.11111%} 
.powerd{ background-image:url('../images/BO_BBQdag-webt_07.jpg'); background-repeat:no-repeat; position:absolute; height:72px; width:287px; margin-left:auto; margin-right:auto;bottom:0px; left:50%; margin-left: -143.5px; }

来源

2012-03-07 starkiller

您的'margin-top：0px 0.11111％'无效。你只能有一个带有'margin-top'的数字。 – ScottS 2012-03-07 14:11:41

是这个实际上不同的屏幕分辨率，或者是放大。如果放大，然后由于您的边缘在一些浏览器无效，你会看到填充推动元素下来。 – CBRRacer 2012-03-07 14:19:38

我记下实际的分辨率。但我已经找到了解决方案:) 感谢您的快速响应！ – starkiller 2012-03-07 15:02:27

对于您需要得到屏幕分辨率当页面加载事件。

<script> 
     function GetScreenHeight_Width() 
      { 
         var h = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight; 
         var w = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth; 
         /** then you stored it into Hidden Control 
          As per resolution you can set position of the Content with absolute or Fixed position. 
        You have to set position of the <div class="content"></div> element as per resolution..  
    When page load then call this function to set Actual height width of the Screens 
         */     
       } 
// Call function on page load. 
GetScreenHeight_Width(); 
</script>

让我知道，如果不工作。

来源

2012-03-07 14:13:57

CSS小屏幕上的图片几乎在顶部，在大屏幕上更多在中间

回答

相关问题