مشکل در تغییر اندازه ی صفحه در رزولوشن های متفاوت

maminj · Jul 27, 2013

سلام

من یک صفحه ی html ساختم که قراره صفحه ی ورود یک سایت باشه ، ولی این صفحه فقط در رایانه ی من با رزولوشن 1152*448 درست نمایش داده میشه و در خیلی از رایانه ها

به درستی نمایش داده نمیشه و باید زوم صفحه رو تغییر بدن تا درست شه.

اگه منظورم رو متوجه نشدید به این نشانی برید و خودتون مشکل رو مشاهده کنید:

www.studynet.ir

حالا من میخوام پس زمینه ی این صفحه کل مانیتور رو بگیره و اجزای کناری روی آدمک نیفته.

باید چیکار کنم تا درست بشه ، آیا کد جاوا یا جی کوئری برای این کار هست؟

jeyson · Jul 28, 2013

با سلام
دوست عزیز لطفا به کد های نمونه ی زیر دقت کنید. سه استایل تعریف شده و قبل از تمامی کد ها و درون تگ body به صورت div تعریف شده.
همین طور استایل تعریف شده برای تگ html برای تغییر سایز دادن عکس بکگراند مهم است.
نمونه کد ها :
[PHPS]

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JEYSON style test</title>
<style type="text/css">
html{
background:url("http://iranavatar.com/images/hd_bg.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-color:#000;
height:100%;
}
div.main_container{
padding:0 0 0 0;
margin:0 0 0 0;
height:100%;
}

/*------Body Starts------------*/
div.container{
width:630px;
padding:0 0 0 0;
margin:0 auto 0 auto;
position:relative;
}
div.top_portion{
margin:0 auto;
width:450px;
padding:42px 0 16px 0;
position:relative;
}
.img{
position:absolute;
left:200px;
}
</style>
</head>

<body>
<div class="main_container">
<div class="container">
<div class="top_portion">

<p style="color:#fff; font-size:30px;"> Hello world! this is the test</p>
<img id="img" src="http://iranavatar.com/images/bigimg_pic1.jpg" width="350" height="220" >

</div>
</div>
</div>
</body>
</html>

[/PHPS]