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

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

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

    css3 attributes

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

    مقدار contain:

    اگر ویژگی object-fit رو برابر با contain قرار بدین باعث میشه که تصویر به نحوی تغییر اندازه بده که بصورت کامل درون content-box قرار بگیره و در عین حال aspect ratio اون ثابت بمونه و ظاهر عکس به هم نریزه. اگر تصویر مورد نظر کل content-box رو پوشش نده، پس زمینه اون نقاط نمایش داده میشه. حالا همون کدهای قبلی رو در نظر میگیریم و بجای fill از contain استفاده میکنیم.

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

    همونطور که دیدید ارتفاع رو کم کردیم و مقدار رو برابر با contain قرار دادیم. با اینکار خروجی بصورت زیر میشه:object-fit contain 1

    میبینید که تصویر مورد نظر در این حالت aspect ratio خودش رو حفظ کرده و عرض تصویر هم متناسب با ارتفاع اون کم شده تا بتونه بصورت کامل هم درون content-box قرار بگیره و هم aspect ratio خودش رو حفظ کنه. همونطور که میبینید، اون مناطقی از content-box که توسط تصویر اشغال نشده، قرمز رنگ هست و این رنگ، همون رنگ پس زمینه هستش که برای فهم بیشتر نمایش داده میشه. اگر ارتفاع رو زیاد کنیم و 400 پیکسل قرار بدیم، خروجی بصورت زیر میشه:object-fit contain 2

    در این حالت معکوس حالت بالا اتفاق میوفته و ارتفاع تصویر خودش رو با عرض تصویر تطابق میده و علاوه بر اینکه درون content-box قرار میگیره، aspect ratio خودش رو حفظ میکنه. همونطور که میبینید در این حالت در بالا و پایین رنگ قرمز قرار میگیره.

    مقدار contain زمانی مفیده که شما ابعاد تصویر رو ندونید اما مجبور باشید که اون رو درون یک container که یک عرض مشخص داره قرار بدین و اون رو fit و متناسب کنید.

    ویژگی cover:

    اگر شما قصد دارید که تصویر رو بصورت کامل درون content-box جا بدین و content-box بصورت کامل پر بشه و در عین حال aspect ratio تصویر بهم نخوره، میتونین از مقدار cover استفاده کنید. در این حالت اون طرفی از تصویر که کوچکتر هست، بزرگ میشه و به نحوی از content-box بیرون میزنه که aspect ratio ثابت بمونه. اون قسمتهایی از تصویر که از content-box بیرون میزنه، بریده یا Crop میشه. مثلا کد زیر رو در نظر بگیرید:

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

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

    میبینید که کل Content-box پوشش داده شده و قسمتی از ارتفاع تصویر هم بریده شده. اگر ارتفاع رو 400 پیکسل قرار بدیم، از عرض اون بریده میشه. خروجی بصورت زیر هست:object-fit cover 2

    بهمین راحتی.

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

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

    موفق باشید

    یا علی

    Source

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

    جلسات دوره

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

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

    نیاز به لاگین

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