آموزش ویژگی object-fit در CSS

از ویژگی object-fit برای مشخص کردن اینکه عناصر <img> و <video> چگونه باید تغییر اندازه پیدا کنند تا در ظرف(container) خود جا شوند، استفاده می شود. این ویژگی باعث می شو محتوا در ظرف(container) خود به روش های مختلف جا شود؛ مانند "حفظ نسبت ابعاد" یا "کش آمدن و اشغال فضای بیشتر". به تصویر زیر توجه کنید. عرض این تصویر 400 پیکسل و ارتفاع آن 300 پیکسل است. 

اما اگر این تصویر را استایل دهی کنیم تا نصف عرض خود شود(200 پیکسل) و ارتفاع آن همان ارتفاع قبلی(300 پیکسل) باشد، به صورت زیر خواهد بود:

img {
  width: 200px;
  height: 300px;
}

همان طور که مشاهده می کنید، این تصویر  فشرده شده است تا در ظرف 300×200 پیکسلی خود جا شود(نسبت ابعاد اصلی از بین رفته است). ویژگی object-fit در موارد زیر ظاهر می شود. یعنی این ویژگی می تواند یکی از مقادیر را داشته باشد:

1. fill : این مقدار پیش فرض است. با استفاده از این مقدار، تصویر مورد نظر تغییر اندازه می دهد تا در ابعاد داده شده جا شود. تصویر، کشیده یا فشرده می شود تا در ابعاد داده شده جا شود. 
2. contain : تصویر نسبت ابعاد خود را حفظ می کند اما تغییر اندازه داده می شود تا در داخل ابعاد داده شده جا شود. 
3. cover : تصویر نسبت ابعاد خود را حفظ می کند و ابعاد داده شده را پر می کند. این تصویر برش می خورد تا جا شود.
4. none : تصویر تغییر اندازه داده نمی شود. 
5. scale-down : مرورگر بطور خودکار سعی میکند بین none و contain یکی را انتخاب و اونی که عنصر را در کوچکترین ابعاد نمایش میدهد مشخص میکند[1].

استفاده از ویژگی و مقدار object-fit: cover در CSS

اگر از دستور object-fit: cover; استفاده کنیم، تصویر نسبت ابعاد خود را حفظ می کند و دایمنشن(ابعاد) داده شده را پر می کند. این تصویر برش می خورد تا جا شود:

img {
  width: 200px;
  height: 300px;
  object-fit: cover;
}

استفاده از دستور object-fit: contain; در CSS

اگر از دستور object-fit: contain; استفاده کنیم، تصویر نسبت ابعاد خود را حفظ می کند اما تغییر اندازه داده می شود تا در داخل ابعاد داده شده جا شود. 

img {
  width: 200px;
  height: 300px;
  object-fit: contain;
}

استفاده از دستور object-fit: fill; در CSS

اگر از دستور object-fit: fill; استفاده کنیم، تصویر ما تغییر اندازه می دهد تا ابعاد داده شده را پر کند. در صورت لزوم، تصویر فشرده یا کشیده می شود تا جا شود. 

img {
  width: 200px;
  height: 300px;
  object-fit: fill;
}

 استفاده از دستور object-fit: none; در CSS

اگر از دستور object-fit: none; استفاده کنیم، تصویر تغییر اندازه داده نمی شود. 

img {
  width: 200px;
  height: 300px;
  object-fit: none;
}

استفاده از دستور object-fit: scale-down; در CSS

اگر از دستور object-fit: scale-down; استفاده کنیم، مرورگر بطور خودکار سعی میکند بین none و contain یکی را انتخاب و اونی که عنصر را در کوچکترین ابعاد نمایش میدهد مشخص میکند. 

img {
  width: 200px;
  height: 300px;
  object-fit: scale-down;
}

 یک مثال دیگر

در اینجا دو تصویر داریم و می خواهیم آنها هرکدام %50 از عرض(width) پنجره ی مرورگر، را پر کنند و %100 از ارتفاع(height) را پر کنند. در مثال زیر، ما از دستور object-fit استفاده نمی کنیم؛ بنابراین وقتی که پنجره ی مرورگر را تغییر اندازه می دهیم، نسبت ابعاد تصاویر از بین خواهد رفت. 

<div style="width:100%;height:400px;">
  <img src="/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;">
  <img src="/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;">
</div>

 در مثال زیر، از دستور object-fit: cover; استفاده می کنیم، بنابراین وقتی که پنجره ی مرورگر را تغییر اندازه می دهیم، نسبت ابعاد تصاویر حفظ می شود:

<div style="width:100%;height:400px;">
  <img src="/rock600x400.jpg" alt="Norway" style="float:left;width:50%;height:100%;object-fit:cover;">
  <img src="/paris.jpg" alt="Paris" style="float:left;width:50%;height:100%;object-fit:cover;">
</div>

 مثال های بیشتر از object-fit

در مثال زیر، از تمام مقادیر امکان پذیر برای ویژگی object-fit در قالب یک مثال استفاده شده است:

 <script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script> 

منابع:

 جمله [1]: https://free-learn.ir