基本上我想要的是当屏幕分辨率上升时图片“内容”向下移动到中心。这可能吗？？
//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; }
最佳答案
为此，您需要在页面加载事件时获取屏幕分辨率。
<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>
如果不工作请告诉我。
关于html - CSS 图片在小屏幕上几乎在顶部，在大屏幕上更多在中间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9602947/