background-size

از ویژگی background-size برای تعیین اندازه تصویر پس زمینه عنصر استفاده می شود.

این ویژگی می تواند یک جفت مقدار درصدی و یا طولی بگیرد. همینطور کلمات کلیدی cover و contain را قبول می کند و در نهایت مقدار auto را هم می توان برای این ویژگی در نظر گرفت.
 

background-size: 300px 200px; /* مقادیر طولی */
background-size: 100% 50%; /* مقادیر درصدی */
background-size: 200px 100%; /* ترکیب درصدی و طولی */
background-size: 50% auto; /* 'auto' استفاده از درصد و */
background-size: cover; /* کلمه کلیدی */
background-size: contain; /* کلمه کلیدی */

 

زمانی که از دو مقدار استفاده می کنیم (مثل چهار روش اول) اولین مقدار مربوط به عرض پس زمینه و دومین مقدار مربوط به ارتفاع آن است. اگر مانند نمونه زیر فقط یک مقدار داده شود مرورگر مقدار دوم را auto در نظر می گیرد.

 

background-size: 300px; /* 300px auto */

 
در دموی زیر با تغییر مقدار این ویژگی یک درک اولیه از مقادیر مختلف بدست بیاورید بعد از آن به شرح تک تک مقادیر می پردازیم:

 

See the Pen background-size by Mojtaba Seyedi (@seyedi) on CodePen.

 

مقدار طولی

این نوع مقادیر مثل 200px و غیره باعث می شوند تا پس زمینه دقیقا به همین اندازه در راستای مشخص شده ترسیم شود.

 

مقدار درصدی

این نوع مقادیر باعث می شوند تا پس زمینه با درصد تعیین شده نسبت به ناحیه ترسیم تعیین شود. ناحیه ترسیم پس زمینه با توجه به ویژگی background-origin تعیین می شود.

 

contain

contain باعث می شود تا تصویر به اندازه ای در بیاید که هم عرض و هم ارتفاع تصویر درون ناحیه ترسیم پس زمینه قرار بگیرند. توجه داشته باشید که این کار با حفظ تناسب عرض و ارتفاع تصویر صورت می گیرد.

تصویر متحرک زیر درک بهتری از این مقدار را به شما می دهد. در اولین حرکت فرض کنید تصویری بزرگتر از محیط ترسیم دارید این مقدار باعث کوچک شدن تصویر می شود تا جایی که کل تصویر قابل مشاهده باشد. در حالت دوم تصویر کوچکتر از محیط در نظر گرفته شده این بار مقدار contain باعث می شود تا تصویر تاجایی بزرگ شود تا یا اندازه عرض و یا ارتفاع تصویر متناسب با اندازه نگهدارنده شود:

 

 

اگر بخواهیم در یک جمله contain را تعریف کنیم خواهیم گفت این مقدار باعث می شود تا حداقل یک سمت تصویر برابر با نگهدارنده شود بطوری که کل تصویر قابل مشاهده باشد.

 

cover

cover باعث می شود تا مقدار کوچکتر بین عرض و ارتفاع, تمام سطح محیط ترسیم پس زمینه را بپوشاند و واضح است که مثلا اگر عرض کوچکتر از ارتفاع است و سطح را بعد از تغییر می پوشاند قطعا ارتفاع هم از آنجایی که بزرگتر است باعث پوشش عمودی سطح می شود. تصویر متحرک زیر حالتی که تصویر اصلی از نگهدارنده کوچکتر است و حالتی که بزرگتر است را برای درک بهتر موضوع شبیه سازی می کند:

 

 

 

auto

اگر برای هر دو مورد یعنی عرض و ارتفاع مقدار auto در نظر گرفته شود تصویر پس زمینه با ابعاد ذاتی خودش ترسیم شود. یعنی اندازه فایل تصویر هرچه که هست در پس زمینه به همان ابعاد رسم می شود.

اگر یک مقدار auto باشد و دیگری یک مقدار طولی و یا درصدی باشد آن سمتی که auto است طوری تغییر می کند تا نسبت عرض و ارتفاع حفظ شود.

مثال زیر را در نظر بگیرید:

 

background-size: 60% auto;

 

نتیجه اینگونه خواهد بود که تصویر پس زمینه 60 درصد اندازه عنصر نگهدارنده اش را می گیرد و مرورگر اندازه ارتفاع را طوری تعیین می کند تا نسبت تصویر حفظ شود. در تصویر متحرک زیر مقدار عرض را تغییر می دهیم تا همزمان تغییرات ارتفاع را مشاهده کنید و درک موضوع راحت تر شود:

 

 

نکته دیگر اینکه استفاده از 100% 100% برای پوشش کامل سطح یک عنصر توصیه نمی شود چون بر خلاف زمانی که از cover استفاده می کنید, نسبت تصویر حفظ نمی شود و تصویر ظاهر خوبی به خود نخواهد گرفت. مگر اینکه نسبت عرض و ارتفاع عنصر و تصویر یکی باشد.

نکته مهم اینکه توجه داشته باشید که ما دو نوع تصویر در پس زمینه می توانیم داشته باشید. اولین نوع تصویر معمولی است مثل تصاویر JPEG و غیره. دومین نوع گرادینت ها هستند.

موارد توضیح داده شده در مورد تصاویر معمولی بودند که این نوع تصاویر دارای ابعداد ذاتی هستند. اما در مورد تصاویر گرادینتی که ذاتا عرض و ارتفاع مشخص ندارند در برخی موارد رفتار متفاوت وجود در دارد.

مثلا اگر پس زمینه از نوع گرادینت باشد و مقدار ویژگی background-size یکی از مقادیر cover و یا contain باشد در هر صورت تصویر کاملا اندازه پس زمینه خواهد شد. برای مقدار auto هم نتیجه یکسان است.

می توان با استفاده از این ویژگی برای چند پس زمینه بطور همزمان اندازه تعیین کرد فقط کافی است مقادیر را با استفاده از ویرگول از هم جدا کنیم. البته توجه داشته باشید که ترتیب اهمیت دارد به طوری که اولین اندازه مربوط به اولین تصویر است و تا آخر همین ترتیب حفظ می شود. مثال زیر این موضوع را نمایش می دهد:

 

background-image: url(path/to/first/image.jpg), url(path/to/second/image.png);
background-size: 100% 100%, contain;

 

در دموی زیر با تغییر مقادیر این ویژگی به درک بهتر موضوع کمک کنید:

 

See the Pen background-size by Mojtaba Seyedi (@seyedi) on CodePen.

 

پشتیبانی مرورگر ها