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



visibility  
mode_comment   ۰

css3 attributes

در جلسه پیش در مورد ویژگی image-rendering صحبت کردیم و مثالهایی رو براتون قرار دادیم. در این جلسه قصد داریم ویژگی object-fit رو براتون توضیح بدیم. برای این ویژگی از این لینک به عنوان منبع استفاده میکنیم.

ویژگی object-fit و object-position

زمانی که از تصاویر یا ویدیو درون قالب سایتتون استفاده میکنید، ممکن هست که قالب سایتتون رو با مشکل مواجه کنه. فرض کنید که شما عرض یک تصویر رو مشخص کرده باشید و ارتفاع اون رو یا مشخص نکردید و یا اون رو برابر با auto قرار دادید. اگر واحد این مقدار درصدی یا بر مبنای viewport باشه، زمانی که مرورگر رو تغییر سایز میدید، میبینید که عرض و ارتفاع تصویر بصورت اتوماتیک کاهش پیدا میکنه و aspect ratio یا نسبت طول به عرض تصویر ثابت باقی میمونه.

حالا شرایطی رو فرض کنید که یک فضای محدود رو داشته باشید و شما باید مقدار محدود و اجباری رو برای ارتفاع اون قرار بدین. در این شرایط زمانی که مرورگر رو تغییر سایز میدین، باعث میشه که aspect ratio تصویر به هم میریزه و دیگه مناسب نیست.

تقریبا بیشتر مشکلاتی که در رابطه با سایز یا Aspect ratio تصویر به وجود میاد، با استفاده از ویژگی های object-fit و object-position قابل حل کردن هستن. این ویژگی ها شباهت های بسیاری با ویژگی های background-position و background-size دارن و اگر با این دو آشنایی داشته باشید، ویژگی های object-fit و object-position رو به خوبی درک خواهید کرد.

از این دو ویژگی بیشتر برای تصاویر و ویدیوها مورد استفاده قرار میگیره. پشتیبانی مرورگرها از این ویژگی به نسبت خوب هست و فقط Internet Explorer و Microsoft Edge از اون پشتیبانی نمیکنن. برای اینکه Opera Mini هم از این ویژگی پشتیبانی بکنه، باید vendor Prefix مربوطه که -o- هست رو برای ویژگی استفاده کنید.caniuse object-fit

ویژگی object-fit

این ویژگی مشخص میکنه که تصویر یا ویدیوی مورد نظر چطور باید فضای content-box رو اشغال کنه و 5 مقدار زیر رو قبول میکنه:

  • fill
  • contain
  • cover
  • none
  • scale-down

حالا یکی یکی این مقادیر رو توضیح میدیم و برای هر کدوم مثالهایی رو قرار میدیم.

مقدار fill:

این مقدار، مقدار پیش فرض object-fit هست. در این حالت تصویر مورد نظر، کل فضای مربوط به content-box رو اشغال میکنه و چیزی از background یا پس زمینه اون نمایش داده نمیشه. برای اینکار تصویر زیر رو قرار میدیم:

عرض و ارتفاع این تصویر 350 در 350 پیکسل هست و خروجی اون در حالت عادی بصورت زیر هست:object-fit fill

حالا کد زیر رو برای اون قرار میدیم:

میبینید که عرض تصویر رو برابر با 260 قرار دادیم و ارتفاع اون رو برابر با auto قرار دادیم و با اینکار aspect ratio ثابت میمونه و ارتفاع تصویر هم 260 پیکسل میشه. پس زمینه رو هم قرمز کردیم تا پس زمینه در زمانهایی که تصویر کل content-box رو پوشش نمیده، مشخص باشه. ویژگی object-fit رو هم برابر با fill یا همون مقدار پیش فرضش قرار دادیم. خروجی بصورت زیر میشه:object-fit fill 2

حالا اگر در همین حالت ارتفاع رو 200 پیکسل قرار بدیم، خروجی بصورت زیر میشه:object-fit fill 3

میبینید که aspect ratio تصویر به هم میریزه و همچنان تصویر مورد نظر کل فضای content-box رو اشغال کرده. اگر ارتفاع 400 پیکسل قرار بدیم بصورت زیر میشه:object-fit fill 4

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

بهمین راحتی.

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

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

موفق باشید

یا علی

Source

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

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