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



visibility  
mode_comment   ۲

css3 attributes

در این جلسه قصد داریم ویژگی object-position که به همراه object-fit مورد استفاده قرار میگیره رو بصورت کامل آموزش بدیم.

ویژگی object-position

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

اینجا هست که میتونیم از ویژگی object-position استفاده کنیم. این ویژگی دقیقا شبیه به Background-position عمل میکنه. مثلا کد زیر رو در نظر بگیرید:

با اینکار دیگه موقعیت تصویر وسط اون نیس و بالا و سمت چپ تصویر هست. علاوه بر استفاده از پیکسل، میتونیم از واحد درصد هم استفاده کنیم. برای مثال object-position: 0% 0% بالا و سمت چپ و object-position: 100% 100% پایین و سمت راست تصویر رو نمایش میده. استفاده از مقادیر درصدی زمانی که عرض و ارتفاع تصاویر رو نمی دونید خیلی میتونه مفید باشه.

زمانی که Aspect ratio تصویر و Content-box یکی باشه، استفاده از ویژگی object-position معنا نداره و تاثیری در خروجی نمیزاره. فرض کنید که شما کد زیر رو داشته باشید:

با اینکار تصویر sunset.jpg که عرض و ارتفاع اون 800 در 531 پیکسل هست رو در صفحه قرار میدیم. حالا کد زیر رو به اون نسبت میدیم:

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

میبینید که تصویر مورد نظر بصورت نامناسب کشیده شده و Aspect ratio اون به هم خورده. برای حل این مشکل میتونیم از object-fit استفاده کنیم و اون رو برابر با cover قرار بدیم. با اینکار خروجی بصورت زیر میشه:

خروجی:object-position 2

همونطور که میبینید Aspect ratio به حالت اصلی برگشت اما یک مشکل دیگه به وجود اومد. مشکل اینه که نقطه اصلی تصویر خورشید هست که در حالت بالا اصلا وجود ندارد. پس شما میتونین به کمک object-position اون رو برطرف کنید. برای اینکار بصورت زیر عمل میکنیم:

خروجی بصورت زیر میشه:object-position 3

همونطور که میبینید این حالت خیلی بهتر هست و نقطه تمرکز تصویر درون Content box نمایش داده شده.

یکی دیگه از چیزهای جالبی که باید در مورد object-position بدونین اینه که میتونین با استفاده از اون انیمیشنهای حرفه ای و زیبایی رو درست کنید. مثال زیر رو در نظر بگیرید:

خروجی بصورت زیر میشه: همونطور که دیدید تصویر با حالتی زیبا به سمت چپ و راست حرکت میکنه.

به همین راحتی. همونطور که دیدید قبلا در مورد پشتیبانی مرورگرها از این ویژگی صحبت کردیم. اگر شما قصد دارید که مرورگرهای IE و Edge و .... رو هم تحت پوشش قرار بدین، میتونین از Polyfill هایی که وجود داره استفاده کنید و این مشکل رو برطرف کنید.

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

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

موفق باشید

یا علی

Source

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

جالب اگه تو همه مرورگرا پشتیبانی بششه

محمد اسفندیاری

فقط مرورگرهای IE و EDGE از این ویژگی پشتیبانی نمیکنن و این مشکل رو میتونین با استفاده از Polyfill که در آخر معرفی کردم ، برطرف کنید
موفق باشید

ارسال نظرات

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