پهنای صفحه

[rooform]

سلام به همه اساتید
من یک سوال دارم که شاید پیش پا افتاده به نظر برسه اما ذهن من رو مشغول کرده
ببینید ما در طراحی عرض بخش اصلی رو حدود 1000 در نظر می گیریم
اما خوب میشه در body یا برای قسمت header عرض تمام صفحه یا 100% پهنا رو اعمال کرد
حالا وقتی تصویر پشت زمینه ما یک عکس باشه و این عکس هم در طراحی نباید repeat بشه، آیا میشه کاری کرد که این عکس با بزرگ و کوچک شدن مانیتور کمی تغییر سایز بده؟
مثلا به عکس پایین نگاه کنید.

پشت زمینه قرمز که خوب می تونه پترن باشه (مثلا )
اما هدر طلایی رنگ رو ببینید
این سایت به شکل تمام صفحه هست
پس اگر مانیتور کسی کمی بزرگتر از اون هدر باشه چه اتفاقی میفته؟؟؟؟؟؟
نمی دونم چطوری منظورم رو بگم اما امیدوارم متوجه شده باشید
اگر هم در نظر بگیریم کل پشت زمینه + بخش طلایی کلا یک عکسه باز هم دچار همین مشکل پهنا میشیم.

 

[dexted]

سلام دوست عزیز

اون چیزی که من از پست شما متوجه شدم تا اونجایی که من میدونم از تکنیک های طراحی Responsive محسوب میشه.

حالا من چند تا راه رو به شما میگم اگر منظورتون همین ها بود که خدا رو شکر
اگر هم نبود توضیح بیشتری بفرمایید لطفا

این استایل که برای تگ img داده شده باعث می شه عرض و طول صفحه به هر اندازه ای که در بیاد این عکس هم به طور متناسب تغییر اندازه بده

<img src="image url" style="max-width:100%;height:auto;"/>

البته برای نمایش صحیح در IE8 باید هک زیر رو اضافه کنید:

width:auto\9;

حالا اگر بخواهیم عکس ما به صورت بکگراند در یک div باشه راهی که به نظر مناسب میاد استفاده از استایل زیر برای div هست:

[CSSS]
background:url(adrese aks) no-repeat;background-size:100% 200px
[/CSSS]

background-size یکی از ویژگی های جدید هست که در CSS3 اضافه شده (در این مورد باید برای نمایش در IE از یک راه مناسب استفاده کنید!) الان این کد به این صورت هست که میاد عرض بکگراند رو 100% در نظر میگیره و حالا میشه هر ارتفاعی میخاهیم به عکس بدیم (اینجا مثلا 200px) داده شده.

امیدوارم مفید بوده باشه براتون