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

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

css3 attributes

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

ویژگی object-position

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

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

.zero-zero {
  object-position: 0px 0px;
}

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

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

<img src="sunset.jpg">

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

img {
	width: 260px;
	height: 400px;
	background-color: red;
}

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

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

img {
	width: 260px;
	height: 400px;
	background-color: red;

	object-fit: cover;
}

خروجی:object-position 2

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

img {
	width: 260px;
	height: 400px;
	background-color: red;

	object-fit: cover;
	object-position: 0% 0%;
}

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

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

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

img {
	width: 260px;
	height: 400px;
	background-color: red;

	object-fit: cover;
	object-position: 0% 0%;
	animation: ltr 5s alternate infinite;
}

@keyframes ltr {
  0% {
    object-position: 0% 0%;
  }
  25% {
    object-position: 20% 0%;
  }
  100% {
    object-position: 100% 100%;
  }
}

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

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

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

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

موفق باشید

یا علی

Source

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

جلسات دوره

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

Abbas Mirza

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

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

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

نیاز به لاگین

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