آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 30) : ویژگی object-fit و object-position - قسمت 3

دسته بندی: آموزش
زمان مطالعه: 3 دقیقه
۳۰ فروردین ۱۳۹۶

فهرست محتوای این مقاله

    css3 attributes

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

    مقدار none:

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

    img {
    	width: 260px;
    	height: 200px;
    	background-color: red;
    
    	object-fit: none;
    }

    خروجی در مرورگر بصورت زیر هست:object-fit none 1

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

    img {
    	width: 400px;
    	height: 400px;
    	background-color: red;
    
    	object-fit: none;
    }

    خروجی بصورت زیر میشه:object-fit none 2

    میبینید که تصویر در اندازه اصلی خودش و در وسط 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 با اون رفتار میشه:object-fit none 2

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

    img {
    	width: 200px;
    	height: 400px;
    	background-color: red;
    
    	object-fit: scale-down;
    }

    خروجی:object-fit scale-down 1

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

    img {
    	width: 400px;
    	height: 200px;
    	background-color: red;
    
    	object-fit: scale-down;
    }

    خروجی:object-fit scale-down 2

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

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

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

    موفق باشید

    یا علی

    Source

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

    جلسات دوره

    نظرات کاربران

    اولین دیدگاه این پست رو تو بنویس !

    نیاز به لاگین

    برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
    گزارش مشکل