از object-fitویژگی CSS برای تعیین نحوه تغییر اندازه <img> یا <video> استفاده می شود تا متناسب با ظرف آن باشد.


ویژگی CSS-object-fit

از object-fitویژگی CSS برای تعیین نحوه تغییر اندازه <img> یا <video> استفاده می شود تا متناسب با ظرف آن باشد.

این ویژگی به طرق مختلف به محتوا می گوید که ظرف را پر کند. مانند “آن نسبت ابعاد را حفظ کنید” یا “تا حد ممکن فضای کشیده و اشغال کنید”.

به تصویر زیر از پاریس نگاه کنید. عرض این تصویر 400 پیکسل و ارتفاع 300 پیکسل است:

پاریس

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

پاریس

مثال

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

می بینیم که تصویر در حال جمع شدن است تا متناسب با ظرف 200×300 پیکسل باشد (نسبت ابعاد اصلی آن از بین می رود).

در اینجا محل ورود object-fitویژگی است. این object-fitویژگی می تواند یکی از مقادیر زیر را بدست آورد:

  • fill– این پیش فرض است. تغییر اندازه تصویر برای پر کردن بعد داده شده است. در صورت لزوم ، تصویر متناسب و کشیده خواهد شد
  • contain – تصویر نسبت ابعاد خود را حفظ می کند ، اما برای متناسب بودن در بعد داده شده تغییر اندازه می یابد
  • cover– تصویر نسبت ابعاد خود را حفظ کرده و بعد داده شده را پر می کند. تصویر متناسب خواهد شد
  • none – اندازه تصویر تغییر نمی کند
  • scale-down– تصویر به کوچکترین نسخه noneیا تغییر می یابد contain

با استفاده از متناسب بودن شی: پوشش؛

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

پاریس

مثال

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

با استفاده از متناسب بودن شی: حاوی؛

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

پاریس

مثال

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

با استفاده از متناسب بودن شی: fill؛

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

پاریس

مثال

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

با استفاده از متناسب بودن شی: هیچ؛

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

پاریس

مثال

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

استفاده از متناسب بودن شی: مقیاس پایین

در صورت استفاده object-fit: scale-down;از تصویر ، کوچکترین نسخه noneیا contain:

پاریس

مثال

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

مثالی دیگر

در اینجا دو تصویر داریم و می خواهیم عرض 50٪ پنجره مرورگر و 100٪ ارتفاع را پر کنند.

در مثال زیر ما از آن استفاده نمی کنیم object-fit، بنابراین وقتی اندازه پنجره مرورگر را تغییر اندازه می دهیم ، نسبت تصویر از بین می رود:

مثال

نروژپاریس

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

مثال

نروژپاریس

 CSS متناسب با آبجکت مثالهای بیشتر

مثال زیر تمام مقادیر ممکن object-fitرا در یک مثال نشان می دهد:

مثال

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}

منبع