اُپن تگ | منابع و محتوای آموزشی برای طراحان وب
بدون نتیجه
نمایش همه نتایج
  • ثبت نام / ورود
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
اپن تگ
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS
بدون نتیجه
نمایش همه نتایج
بدون نتیجه
نمایش همه نتایج
اپن تگ

خانه › CSS3 › ویژگی › ویژگی object-position در CSS

ویژگی object-position در CSS

object-position Property

عناصر مرتبط:
object-fit

ویژگی object-position در CSS همراه با ویژگی object-fit بکار می رود و مشخص می کند عناصر <img> و <video> داخل عنصر والد خود چگونه قرار گیرند.

نحوه نمایش

object-position: center center;
object-position: 25px -30px;

مقادیر

 کلیدواژه

برای تعیین موقعیت در حالت دو بعدی از کلیدواژه های top, bottom, righ, left و ترکیب آنها در دو محور افقی و عمودی استفاده می شود.

واحد های اندازه (طول)​

از واحدهایی مانند px , em و rem استفاده می شود.

نکته: موقعیت محتوای عنصر به نحوی می تواند تعیین شود که خارج از محدوده عنصر قرار گیرد.

در مثال زیر نحوه عملکرد این ویژگی را میبینیم:

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

html

<div>
   <p>object-position: center center;</p>
   <img class="center" src="http://my-project.ir/img/basketball-ball.jpg" />
</div>
<div>
   <p>object-position: center right;</p>
   <img class="center-right" src="http://my-project.ir/img/basketball-ball.jpg"/>
</div>
<div>
   <p>object-position: 0px 70px;</p>
   <img class="el3" src="http://my-project.ir/img/basketball-ball.jpg" />
</div>
<div>
   <p>object-position: 50px -37px;</p>
   <img class="el4" src="http://my-project.ir/img/basketball-ball.jpg" />
</div>

css

img {
   width: 200px;
   height: 200px;
   border: 2px dotted #6495ed;
   background-color: #bbffbb;
   object-fit: none;
}
.center {
   object-position: center center; 
}
.center-right {
   object-position: center right; 
}
.el3 {
   object-position: 0px 70px; 
}
.el4 {
   object-position: 50px -37px; 
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها بجز Internet Explorer از این ویژگی در CSS پشتیبانی می کنند.

پست قبلی

ویژگی object-fit در CSS

پست بعدی

ویژگی opacity در CSS

پست بعدی
css-opacity-property

ویژگی opacity در CSS

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

بنر مرجع html
بنر مرجع css

اُپن تگ

اپن تگ در تلاش است با گردآوری منابع و ارائه محتوای آموزشی در حوزه طراحی وب، راه را برای دسترسی طراحان وب و علاقه‌مندان به آخرین روش‌ها و تکنولوژی‌های این بخش از صنعت توسعه وب هموارتر سازد.

با خبر باشید!

برای اطلاع از مطالب ويژه و دوره های آموزشی جدید در خبرنامه اُپن‌تگ عضو شوید.

  • درباره
  • ارتباط با ما

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

  • ورود
  • ثبت نام
  • سبد خرید
  • خانه
  • مقالات
  • مرجع HTML
  • مرجع CSS

خوش آمدید!

به حساب خود وارد شوید

فراموشی رمز عبور ؟ ثبت نام

ساخت حساب کاربری!

فرم زیر را برای ثبت نام تکمیل نمایید

همه فیلد ها ضروری اند وارد شدن

رمز عبور خود را بازیابی کنید

لطفاً ایمیل یا نام کاربری خود را جهت بازیابی رمز عبور وارد نمایید

وارد شدن