آشنایی بیشتر با ۵۰ ویژگی جالب CSS (جلسه ۳۰) : ویژگی object-fit و object-position – قسمت ۳

در این جلسه قصد داریم با ادامه توضیحات مربوط به ویژگی object-fit در خدمتتون باشیم. در جلسه قبل contain و cover رو با هم بررسی کردیم.

مقدار none:

برای نمایش دادن تصویر با اندازه واقعی خودش در هر شرایطی میتونین از مقدار none استفاده کنید. با این کار دیگه width و height که برای تصویر مشخص میکنید، هیچ تاثیری بر روی خود تصویر نداره و فقط content-box رو کوچک و بزرگ میکنه. اگر content-box رو بزرگتر از مقدار عرض و ارتفاع تصویر قرار بدین، باعث میشه که تصویر با عرض و ارتفاع اصلی خودش در وسط content-box قرار بگیره و اگر content-box رو کوچکتر کنیم، باز هم تصویر عرض و ارتفاع اصلی خودش رو داره، با این تفاوت که اون قسمتهایی از تصویر که درون content-box جا نمیشن بریده یا Crop میشن. تصویری که در جلسات قبل از اون برای آوردن مثالها استفاده میکردیم، دارای عرض و ارتفاع اصلی ۳۵۰ در ۳۵۰ پیکسل بود. حالا اگر مقدار عرض رو ۲۶۰ و ارتفاع رو ۲۰۰ قرار بدیم و مقدار object-fit رو برابر با none قرار بدیم، بصورت زیر خواهد بود:

img {
	width: 260px;
	height: 200px;
	background-color: red;

	object-fit: none;
}

خروجی در مرورگر بصورت زیر هست:

همونطور که میبینید content-box به اندازه ۲۶۰ در ۲۰۰ پیکسل در اومده ولی تصویر مورد نظر هنوز در مقدار اولیه خودش یعنی ۳۵۰ در ۳۵۰ هست و به همین دلیل مقداری از تصویر بریده شده و در مرکز قرار گرفته. اگر مقدار width و height رو هم بیشتر از اندازه تصویر قرار بدیم، باز هم تصویر مورد نظر اندازه اولیه خودش رو نگه میداره. کد زیر رو در نظر بگیرید:

img {
	width: 400px;
	height: 400px;
	background-color: red;

	object-fit: none;
}

خروجی بصورت زیر میشه:

میبینید که تصویر در اندازه اصلی خودش و در وسط content-box قرار گرفته.

مقدار scale-down:

آخرین مقداری که میتونین برای ویژگی object-fit از اون استفاده کنید، scale-down هست. همونطور که از اسم این ویژگی هم معلوم هست، تصویر مورد نظر رو به اندازه ای کوچک میکنه تا درون content-box قرار بگیره و در عین حال aspect ratio خودش رو داشته باشه. این مقدار بسته به شرایط مختلف، دو حالت contain و none رو برای تصویر شبیه سازی میکنه. اگر هر دو مقداری که برای width و height قرار میگیره، بزرگتر از عرض و ارتفاع اصلی تصویر باشن، مقدار none اعمال میشه و اگر یکی از width یا height یا هر دوی اونها مقدارش از مقدار عرض یا ارتفاع تصویر اصلی کمتر باشه، به نحوی کوچک میشه که درون Content-box قرار بگیره. در زیر مثالهایی رو میزنیم که بصورت کامل متوجه بشید. در ابتدا حالتی رو در نظر میگیریم که هم عرض و ارتفاع بیشتر از تصویر اصلی باشه. بصورت زیر:

img {
	width: 400px;
	height: 400px;
	background-color: red;

	object-fit: scale-down;
}

در این حالت مثل مقدار none با اون رفتار میشه:

اگر عرض از عرض اصلی تصویر کمتر باشه:

img {
	width: 200px;
	height: 400px;
	background-color: red;

	object-fit: scale-down;
}

خروجی:

همونطور که دیدید تصویر به اندازه ای کوچک شد که بصورت کامل درون content-box قرار بگیره. اگر ارتفاع از ارتفاع تصویر اصلی کمتر باشه:

img {
	width: 400px;
	height: 200px;
	background-color: red;

	object-fit: scale-down;
}

خروجی:

به همین راحتی. در جلسه بعد در مورد ویژگی object-position براتون توضیحاتی رو قرار میدیم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

نویسنده

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