PDA

View Full Version : فیکس کردن تصویر بکراند


Web.Designer01
یک شنبه 17 مرداد 1389, 00:20 صبح
سلام
من یه عکس با سایز 1280*800 دارم،میخوام این عکسو توی بکراند پیجم بندازم،طوریکه فیکس بشه و پیجم اسکرول نخوره،یا به عبارت بهتر یه عکس با سایز بالا رو چجوری میشه تو یه سایز پایین فیکس کرد طوریکه چیزی از طول و عرضش بریده نشه؟
Web.Designer01
یک شنبه 17 مرداد 1389, 10:09 صبح
رزولشن سیستم من 800*1280 هست و من سایز عکسامو برا این رزولوشن تنظیم کرده بودم ولی امروز وقتی کارمو رو یه سیستم دیگه با رزولوشن 768*1024 دیدم همه چی بهم ریخته بود و صفحه اسکرول خورده بود:متعجب:،سایز عکسا و position کنترلامو چجوری باید تنظیم کنم که رزولوشن کاربرا هرچی که باشه سایتو همونجوری که طراحی شده نشون بده نه به هم ریخته؟
binyaft
یک شنبه 17 مرداد 1389, 11:19 صبح
بالاخره هر سایت با یک رزولیشن سازگاره مثلا بیشتر سایت ها 1204*768
فکر نکنم درست بشه
Web.Designer01
یک شنبه 17 مرداد 1389, 11:30 صبح
بالاخره هر سایت با یک رزولیشن سازگاره مثلا بیشتر سایت ها 1204*768
فکر نکنم درست بشه
یعنی چی؟!:متعجب:
یعنی کاربرای سایت من فقط باید سایتو با رزولشن800*1280 ببینن تا همه چی درست نمایش داده بشه؟!
به نظر شما اگه به جای استفاده از واحد px از % استفاده کنم درست نمیشه؟
روش اصولی این کار چیه؟ کسی تاحالا این مشکلو نداشته؟
Web.Designer01
دوشنبه 18 مرداد 1389, 20:50 عصر
کسی نمیدونه چطوری میشه یه عکس بزرگ رو تو یه سایز پایین جا داد(stretch) ؟،طوریکه تو هر رزولوشنی جواب بده.
sarah1361
سه شنبه 19 مرداد 1389, 06:55 صبح
شما باید به صورتی طراحی کنید که در تمام رزولیشن ها یکی باشه همیشه از اندازه های پیکسلی استفاده کن نه در صد .
سعی کن از مدلی استفاده کنی که الان توی اکثر سایتها استفاده می شه و محتوای اصلی
وسط صفحه است . بیشتر وب سایتها را ببین و جستجو کن و این رو هم بدون که بهترین راه حل
فکر کردنه و هیچ مشکلی بدون راه حل نیست . موفق باشی
Web.Designer01
سه شنبه 19 مرداد 1389, 11:36 صبح
شما باید به صورتی طراحی کنید که در تمام رزولیشن ها یکی باشه
دوست عزیز ممنون از پاسخت،به خدا منم هدفم همینه که میگی ولی به مشکل خوردم دیگه!


همیشه از اندازه های پیکسلی استفاده کن نه در صد .
الانم از واحد پیکسل استفاده کردم که اینطوری شده،ولی از درصد هم که استفاده میکنم درست نمیشه،من میخوام یه عکس با سایز بالا رو تو background تگ body بندازم ولی یا نصفه میفته یا اسکرول میخوره نمیخوام اینطوری شه.


سعی کن از مدلی استفاده کنی که الان توی اکثر سایتها استفاده می شه و محتوای اصلی
وسط صفحه است .
به نظرت اگه کل محتویات پیجامو بندازم تو تگ center درست نمیشه؟!بذار الان امتحان میکنم.


این رو هم بدون که بهترین راه حل فکر کردنه و هیچ مشکلی بدون راه حل نیست .
بله حق با شماست،چندین روزه که دارم به این مسئله فکر میکنم،هزارتا راهم امتحان کردم ولی فعلا به نتیجه نرسیدم.:عصبانی++:
Web.Designer01
سه شنبه 19 مرداد 1389, 12:06 عصر
نه نشد!
با <center></center> هم درست نشد،من تو رزولوشن 1280*800 که کار میکنم همه چیو درست نشون میده ولی وقتی میرم تو رزولوشن 768*1024 صفحه کش میاد و اسکرول میخوره،width و height هم 100% گذاشتم.:افسرده:
ehsanes
سه شنبه 19 مرداد 1389, 16:48 عصر
سلام
به اینو ببین مشکلت حل میشه
فقط در کنار فایل htmlیه پوشه image درست کن و عکس با اسم bg قرار بده برای من که مشکلی نداشت (با opera ولی فکر کن روی ie جواب بده ie نداشتم )شما هم امتحان کن مشکلی داشت بگو

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Full Background Image</title>
<style type="text/css" media="screen">


img.bg {

min-height: 100%;
min-width: 100%;


width: 100%;
height: auto;


position: fixed;
top: 0;
left: 0;
}

@media screen and (max-width: 100%){
img.bg {
left: 50%;
margin-left: -512px; }
}

divC#‎ontent {

position: relative;



width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}

body {

margin: 0;
padding: 20px 0 0 0;
}
</style>
</head>

<body>
<img src="images/bg.jpg" class="bg" />
<div id="content">

<p>text</p>
<p>text2</p>

</div>
</body>
</html>
Web.Designer01
سه شنبه 19 مرداد 1389, 21:47 عصر
احسان جان واقعا ممنون،خیلی لطف کردی دوست من،با این css تونستم عکس بکراند رو ست کنم و با تغییر رزولوشن هم مشکلی پیدا نکرد،فقط میشه این یه تیکرو توضیح بدی که چیکار میکنه:


@media screen and (max-width: 100%)
{
img.bg
{
left: 50%;
margin-left: -512px;
}
}

هرچی هست باید زیر سر همین باشه!،در حال حاضر مشکل من با اون contentس!،شما با دستور margin:o auto محتویات این div رو آوردی وسط صفحه و با تغییر رزولوشن هم همون وسط میمونه و تغییری نمیکنه،حالا اگه با margin-left و margin-right بهش موقعیت بدیم و به نقطه دلخواه بیاریمش بعد از تغییر رزولوشن جاش تغییر میکنه،باید چیکار کنم که محتویات تگ content هم با تغییر رزولوشن تغییر نکنه؟حتی با resize کردن مرورگر هم اینور اونور میره!
ممنون:قلب:
sarah1361
سه شنبه 19 مرداد 1389, 22:00 عصر
همیشه طراحی را با توجه به کمترین رزولیشن ست کنید در این صورت دیگه با تغییر رزولیشن
تغییر نداری .البته این نظر من هستش و به صورت تجربی به این نکته رسیدم

در ضمن شما میتونید اگه عکس قابلیت تکرار داره اونو ریپیت کنی.
موفق باشید.
Web.Designer01
سه شنبه 19 مرداد 1389, 22:44 عصر
همیشه طراحی را با توجه به کمترین رزولیشن ست کنید در این صورت دیگه با تغییر رزولیشن
تغییر نداری .
یعنی اگه من از اول مثلا 600*800 کار میکردم الان دیگه مشکلی نداشتم و تو همه روزولوشنا کار میکرد؟یعنی منظورم اینه که این نوع طراحی،اصولیه و همه از این روش استفاده میکنن برای اینکه سایتشون تو همه رزولوشنا جواب بده؟


در ضمن شما میتونید اگه عکس قابلیت تکرار داره اونو ریپیت کنی.

عکسم قابلیت تکرار نداره وگرنه خیلی خوب میشد!
ehsanes
سه شنبه 19 مرداد 1389, 23:31 عصر
سلام
به جای اون کدی که فرستادم از این یکی استفاده کن اصولی تره

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Stretched Background Image</title>
<style type="text/css">
html, body {height:100%; margin:0; padding:0;}
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
#content {position:relative; z-index:1;padding:10px;}
</style>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
</head>
<body>
<div id="page-background"><img src="graphics/bg-1.jpg" width="100%" height="100%" alt="Smile"></div>

</body>
</html>

یه پوشه با نام graphics درست کن و نام عکس هم bg-1 قرار بده درست میشه
Web.Designer01
چهارشنبه 20 مرداد 1389, 01:17 صبح
ایول!احسان جان دقیقا همینو میخواستم اون کد قبلی تصویرو stretch نمیکرد ولی این کد وقتی یه تصویر با سایز 2593*3888 هم میذاری پشت صفحه تصویرو stretch میکنه،مرسی،خیلی دنبالش بودم،کولاک کردی!
فقط یه توضیح میدی چرا تو استایل اول position دیو page-backgroun رو fixed تعریف کردی بعد تو استایل دومی position همین دیوو absolute کردی؟همین طور برای content.
البته من همچنان با اون content مشکل دارم و با تغییر سایز موقعیتش تغییر میکنه،همونطور که تو پست 10 گفتم،میشه اون دیو content رو به یه نقطه مورد نظر آورد تو صفحه و طوری تنظمیش کرد که با تغییر سایز مرورگر و رزولوشن متناسب با stretch شدن بکراند تغییر موقعیت بده؟
ehsanes
چهارشنبه 20 مرداد 1389, 11:13 صبح
سلام
از خط 10 تا 15 برای اینه که کد در ie6 به بالا کار میکنه (میتونی پاکش کنی)

خط 8 رو هم پاک کن به جای اون در تگ body این کد قرار بده

<div style="position:absolute; top:65px; right:20px; height: 40px;"> متن اینجا قرار می گیرد</div>
Web.Designer01
پنج شنبه 21 مرداد 1389, 00:33 صبح
خط 8 رو هم پاک کن به جای اون در تگ body این کد قرار بده
<div style="position:absolute; top:65px; right:20px; height: 40px;"> متن اینجا قرار می گیرد</div>
ممنون احسان جان،واقعا لطف میکنی جواب میدی،همین کارو برا صفحه اولم کردم درست شد،بعدم برای اینکه تو همه روزولوشنا جواب بدی برا موقعیت دهی به div مورد نظر به جای px از % استفاده کردم،امیدوارم برای content هم جواب بده که فکر کنم بده.
از کمکی که کردی خیلی خیلی ممنونم دوست من
موفق باشی
Web.Designer01
پنج شنبه 21 مرداد 1389, 01:09 صبح
ای ول کلا درست شد!
میدونید مشکل چی بود؟!
من position:absolute استفاده کرده بودم برا div مربوط به contentpalceholder بعد برا موقعیت دهیش از margin-left و matgin-top استفاده کرده بودم در صورتی که باید از left و top استفاده میکردم!:خجالت:
همینطور اندازه هامو بر حسب px داده بودم که وقتی از % استفاده کردم دیگه با resize کردن مرورگر هم مشکلی پیدا نمیکرد.
از کمک همه دوستان مخصوصا احسان جان ممنونم:قلب: