در این بخش، کلاس های کاربردی مرتبط با ویژگی object fit در بوت استرپ را بررسی می‌کنیم. این کلاس ها به شما اجازه می‌دهند تا محتوای عناصر جایگزین‌شده مانند تگ های <img> یا <video> را به‌گونه‌ای تغییر اندازه دهید که به‌درستی در چارچوب (container) قرار بگیرند.
ویژگی object-fit تعیین می‌کند که محتوا چگونه درون ظرف قرار بگیرد؛ یا نسبت تصویر (aspect ratio) را حفظ می‌کند یا آن را طوری تنظیم می‌کند که کل فضا را پوشش دهد.
برای استفاده از این ویژگی، باید از ساختار .object-fit-{value} استفاده کنید. در ادامه با مقادیر قابل پشتیبانی این کلاس آشنا می‌شوید:
-
contain – این مقدار، محتوا را کوچک یا بزرگ می‌کند تا کاملاً در کانتینر جا بگیرد، بدون آن‌که نسبت تصویر اصلی تغییر کند. با این روش، تصویر یا ویدیو به‌طور کامل دیده می‌شود.
-
cover – این گزینه محتوا را بزرگ می‌کند تا کل کانتینر را بپوشاند. اگر تصویر به‌اندازه کافی بزرگ نباشد، بخشی از آن بریده می‌شود؛ البته نسبت تصویر همچنان ثابت باقی می‌ماند.
-
fill – مقدار پیش‌فرض همین است. تصویر یا ویدیو به اندازه‌ای کشیده یا فشرده می‌شود تا تمام فضای کانتینر را پر کند، حتی اگر نسبت تصویر از بین برود.
-
scale – زمانی که استفاده از مقدار
containباعث بزرگ شدن محتوا شود، این گزینه محتوا را کوچک می‌کند تا در کانتینر جا بگیرد. اگر محتوا از ابتدا در کانتینر جا شود، این مقدار تغییری ایجاد نمی‌کند. -
none – این مقدار هیچ تغییری در نمایش محتوا نمی‌دهد و آن را به همان صورت اصلی نمایش می‌دهد.
در ادامه، یک مثال از استفاده کلاس .object-fit: none را بررسی می‌کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Object fit</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <style> img { width:200px; height:400px; } </style> </head> <body> <div class="container mt-3"> <h4>Object fit value - none</h4> <img src="https://www.sourcebaran.com/wp-content/themes/sb-wp/images/logo.png" width="667" height="184" class="object-fit-none"> </div> </body> </html> |
بیایید مثالی از استفاده مقدار دیگر ویژگی object-fit یعنی contain را بررسی کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Object fit</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <style> img { width:200px; height:400px; } </style> </head> <body> <div class="container mt-3"> <h4>Object fit value - contain</h4> <img src="https://www.sourcebaran.com/wp-content/themes/sb-wp/images/logo.png" width="667" height="184" class="object-fit-contain"> </div> </body> </html> |
واکنش گرایی در ویژگی object-fit در بوت استرپ
کلاس کاربردی .object-fit دارای نسخه های واکنش گرا برای نقاط شکست مختلف مانند sm، md، lg، xl و xxl است. ساختار استفاده از این کلاس ها به‌صورت .object-fit-{breakpoint}-{value} می‌باشد.
بیایید مثالی از نقطه شکست md را ببینیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Object fit</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <style> img { width:200px; height:400px; } </style> </head> <body> <div class="container mt-3"> <h4>Object fit value (contain) - breakpoint (md)</h4> <img src="https://www.sourcebaran.com/wp-content/themes/sb-wp/images/logo.png" width="667" height="184" class="object-fit-md-contain"> </div> </body> </html> |
بیایید مثالی از نقطه شکست xxl را ببینیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Object fit</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <style> img { width:200px; height:400px; } </style> </head> <body> <div class="container mt-3"> <h4>Object fit value (fill) - breakpoint (xxl)</h4> <img src="https://www.sourcebaran.com/wp-content/themes/sb-wp/images/logo.png" width="667" height="184" class="object-fit-xxl-fill"> </div> </body> </html> |
با کپی کردن کد بالا در ویرایشگر آنلاین، میتوانید آن را اجرا کنید.
کلاس object-fit در ویدیو
کلاس‌های کاربردی .object-fit روی عناصر <video> نیز قابل استفاده هستند و نحوه نمایش محتوا را درون کانتینر کنترل می‌کنند. در آموزش پروژه محور بوت استرپ، استفاده صحیح از این کلاس ها را به شما آموزش دادیم.
بیایید مثالی را ببینیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <title>Bootstrap - Object fit</title> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script> <style> video { border: 5px groove darkblue; padding: 30px; width: auto; height: auto; } </style> </head> <body> <div class="container mt-3"> <h4>Object fit value (cover) - video</h4> <video src="/bootstrap/images/foo.mp4" class="object-fit-cover" autoplay> </video> </div> </body> </html> |
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- انتشار: ۲۳ تیر ۱۴۰۴
دسته بندی موضوعات
- آموزش ارز دیجیتال
- آموزش برنامه نویسی
- آموزش متنی برنامه نویسی
- اطلاعیه و سایر مطالب
- پروژه برنامه نویسی
- دوره های تخصصی برنامه نویسی
- رپورتاژ
- فیلم های آموزشی
- ++C
- ADO.NET
- Adobe Flash
- Ajax
- AngularJS
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- AVR
- Bootstrap
- CCNA
- CCNP
- CMD
- CSS
- Dreameaver
- EntityFramework
- HTML
- IOS
- jquery
- Linq
- Mysql
- Oracle
- PHP
- PHPMyAdmin
- Rational Rose
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- WPF
- Xml
- آموزش های پروژه محور
- اتوکد
- الگوریتم تقریبی
- امنیت
- اندروید
- اندروید استودیو
- بک ترک
- بیسیک فور اندروید
- پایتون
- جاوا
- جاوا اسکریپت
- جوملا
- دلفی
- دوره آموزش Go
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کانستراکت
- کریستال ریپورت
- لاراول
- معماری کامپیوتر
- مهندسی اینترنت
- هوش مصنوعی
- یونیتی
- کتاب های آموزشی
- Android
- ASP.NET
- AVR
- LINQ
- php
- Workflow
- اچ تی ام ال
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- پاسکال
- پایان نامه
- پایتون
- جاوا
- جاوا اسکریپت
- جی کوئری
- داده کاوی
- دلفی
- رباتیک
- سئو
- سایر کتاب ها
- سخت افزار
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- طراحی الگوریتم
- فتوشاپ
- مقاله
- مهندسی نرم افزار
- هک و امنیت
- هوش مصنوعی
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس
