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



visibility  
mode_comment   ۰

css3 attributes

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

مقدار contain:

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

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

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

بهمین راحتی.

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

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

موفق باشید

یا علی

Source

متخصص فرانت اِند
طراحی وب را اصولی فرا بگیرید اگر تصمیمتو گرفتی که به صورت حرفه ای به طراحی UI مشغول بشی و کسب درآمد کنی دوره فرانت اند رو از دست نده، چون توی این دوره هر چیزی که برای رسیدن به هدفت نیاز داری رو در اختیارت قرار می دیم. متخصص فرانت اِند arrow_back
comment دیدگاه کاربران
ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.