تصاویر و Media در Bootstrap

تصاویر یکی از مهم‌ترین عناصر هر وب‌سایت هستند و تقریباً در همه پروژه‌های واقعی از تصاویر استفاده می‌شود؛ از تصویر محصول و پروفایل کاربر گرفته تا تصاویر مقالات، بنرها، گالری‌ها و بخش‌های معرفی خدمات. اگر تصاویر را به شکل صحیح در صفحه قرار ندهیم، ممکن است در نمایشگرهای کوچک از محدوده صفحه خارج شوند یا ظاهر نامناسبی ایجاد کنند. Bootstrap مجموعه‌ای از کلاس‌های آماده برای مدیریت تصاویر و Media در اختیار ما قرار می‌دهد. در این مقاله یاد می‌گیریم چگونه تصاویر را Responsive کنیم، گوشه‌های آن‌ها را گرد کنیم، Border و Thumbnail ایجاد کنیم، از Figure استفاده کنیم و در نهایت یک بخش تصویری واقعی و Responsive بسازیم.

قرار دادن تصویر در HTML

قبل از Bootstrap، برای نمایش تصویر از تگ img استفاده می‌کنیم:

<img src="images/product.jpg" alt="Product Image">

ویژگی‌های مهم این تگ عبارت‌اند از:

• src مسیر تصویر را مشخص می‌کند.

• alt توضیح جایگزین تصویر را مشخص می‌کند.

استفاده صحیح از alt برای Accessibility و در بسیاری از موارد برای SEO نیز اهمیت دارد.

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

فرض کنید یک تصویر عرض بسیار زیادی دارد:

<img src="images/banner.jpg" alt="Banner">

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

ساختار مشکل می‌تواند چیزی شبیه این باشد:

+----------------------+
|      Web Page        |
|                      |
|  +---------------------------+
|  |        Large Image        |
|  +---------------------------+
|                      |
+----------------------+

برای جلوگیری از این مشکل Bootstrap کلاس img-fluid را ارائه می‌کند.

کلاس img-fluid

یکی از مهم‌ترین کلاس‌های Bootstrap برای تصاویر:

img-fluid

است.

مثال:

<img
    src="images/banner.jpg"
    class="img-fluid"
    alt="Website Banner">

این کلاس باعث می‌شود تصویر متناسب با فضای والد خود رفتار کند.

در واقع Bootstrap برای این کلاس از رفتار Responsive تصویر استفاده می‌کند تا تصویر از محدوده Container والد خود خارج نشود.

مثال کامل

<div class="container">

    <img
        src="images/banner.jpg"
        class="img-fluid"
        alt="Website Banner">

</div>

اگر عرض تصویر بزرگ‌تر از Container باشد، تصویر متناسب با فضای موجود نمایش داده می‌شود.

img-fluid چگونه کار می‌کند؟

به صورت مفهومی:

Large Image
     |
     v
Responsive Rule
     |
     v
Available Container Width
     |
     v
Responsive Image

بنابراین لازم نیست برای هر اندازه صفحه، عرض تصویر را به صورت دستی تعیین کنیم.

تغییر اندازه تصویر

Bootstrap Utilityهایی برای Width و Height نیز دارد.

مثلاً:

<img
    src="images/product.jpg"
    class="w-50"
    alt="Product">

در اینجا تصویر حدود 50 درصد عرض والد خود را اشغال می‌کند.

مثال:

<img
    src="images/product.jpg"
    class="w-100"
    alt="Product">

تصویر عرض کامل والد را می‌گیرد.

همچنین:

<img
    src="images/product.jpg"
    class="w-25"
    alt="Product">

عرض تصویر را به 25 درصد عرض والد محدود می‌کند.

ترکیب img-fluid و w-100

در بسیاری از پروژه‌ها می‌توانیم این کلاس‌ها را با Utilityهای دیگر ترکیب کنیم.

<img
    src="images/banner.jpg"
    class="img-fluid w-100"
    alt="Banner">

البته باید توجه داشته باشیم که img-fluid و w-100 کاربردهای متفاوتی دارند و استفاده همزمان از آن‌ها همیشه ضروری نیست.

Rounded Image

برای گرد کردن گوشه‌های تصویر می‌توان از:

rounded

استفاده کرد.

مثال:

<img
    src="images/product.jpg"
    class="img-fluid rounded"
    alt="Product">

نتیجه:

+--------------------------+
|                          |
|        Image             |
|                          |
+--------------------------+

گوشه‌های تصویر کمی گرد می‌شوند.

Rounded با اندازه‌های مختلف

Bootstrap اندازه‌های مختلفی برای Radius در اختیار ما قرار می‌دهد.

برای مثال:

<img
    src="images/product.jpg"
    class="rounded-1"
    alt="Product">

یا:

<img
    src="images/product.jpg"
    class="rounded-3"
    alt="Product">

و:

<img
    src="images/product.jpg"
    class="rounded-5"
    alt="Product">

هرچه مقدار بالاتر باشد، Radius نیز بیشتر می‌شود.

تصویر کاملاً دایره‌ای

یکی از کاربردهای محبوب Bootstrap برای تصاویر پروفایل:

rounded-circle

است.

مثال:

<img
    src="images/user.jpg"
    class="rounded-circle"
    alt="User Profile">

برای نتیجه بهتر، معمولاً بهتر است تصویر نسبت ابعاد مناسبی داشته باشد.

مثلاً:

<img
    src="images/user.jpg"
    width="120"
    height="120"
    class="rounded-circle"
    alt="User Profile">

این الگو برای:

• تصویر کاربر

• Avatar

• تصویر نویسنده

• پروفایل اعضای تیم

بسیار کاربردی است.

Thumbnail

Bootstrap کلاس img-thumbnail نیز دارد.

مثال:

<img
    src="images/product.jpg"
    class="img-thumbnail"
    alt="Product">

این کلاس ظاهر یک Thumbnail با Border و Padding مناسب ایجاد می‌کند.

برای مثال:

+----------------------------+
|  +----------------------+  |
|  |                      |  |
|  |       Image          |  |
|  |                      |  |
|  +----------------------+  |
+----------------------------+

Border برای تصویر

می‌توان Border را نیز با Utilityها اضافه کرد.

<img
    src="images/product.jpg"
    class="img-fluid border"
    alt="Product">

رنگ Border نیز قابل تغییر است:

<img
    src="images/product.jpg"
    class="img-fluid border border-primary"
    alt="Product">

Shadow برای تصویر

با Utilityهای Shadow می‌توان ظاهر تصویر را جذاب‌تر کرد.

<img
    src="images/product.jpg"
    class="img-fluid rounded shadow"
    alt="Product">

یا:

<img
    src="images/product.jpg"
    class="img-fluid rounded shadow-lg"
    alt="Product">

این الگو برای Hero Image و Product Image بسیار رایج است.

ترکیب چند Utility

قدرت Bootstrap زمانی بیشتر مشخص می‌شود که چند Utility را با هم ترکیب کنیم.

مثلاً:

<img
    src="images/product.jpg"
    class="img-fluid rounded-4 shadow border"
    alt="Product">

در این مثال:

• img-fluid تصویر را Responsive می‌کند.

• rounded-4 گوشه‌ها را گرد می‌کند.

• shadow سایه ایجاد می‌کند.

• border Border ایجاد می‌کند.

Figure در Bootstrap

HTML یک عنصر معنایی به نام figure دارد.

برای مثال:

<figure>
    <img
        src="images/nature.jpg"
        alt="Nature"
        class="img-fluid">

    <figcaption>
        A beautiful nature image.
    </figcaption>
</figure>

Bootstrap کلاس‌هایی برای Figure نیز ارائه می‌کند.

مثال:

<figure class="figure">

    <img
        src="images/nature.jpg"
        class="figure-img img-fluid rounded"
        alt="Nature">

    <figcaption class="figure-caption">
        A beautiful nature image.
    </figcaption>

</figure>

Figure Caption

برای متن زیر تصویر از:

figure-caption

استفاده می‌کنیم.

مثال:

<figure class="figure">

    <img
        src="images/city.jpg"
        class="figure-img img-fluid rounded"
        alt="City">

    <figcaption class="figure-caption">
        City view during sunset.
    </figcaption>

</figure>

قرار دادن Caption در سمت راست

می‌توانیم از Utilityهای Text Alignment استفاده کنیم.

<figure class="figure">

    <img
        src="images/city.jpg"
        class="figure-img img-fluid rounded"
        alt="City">

    <figcaption class="figure-caption text-end">
        City view during sunset.
    </figcaption>

</figure>

Figure در Layout

Figure را می‌توان داخل Grid نیز قرار داد.

<div class="container">

    <div class="row g-4">

        <div class="col-12 col-md-6">

            <figure class="figure">

                <img
                    src="images/image-1.jpg"
                    class="figure-img img-fluid rounded"
                    alt="Image 1">

                <figcaption class="figure-caption">
                    Image One
                </figcaption>

            </figure>

        </div>

        <div class="col-12 col-md-6">

            <figure class="figure">

                <img
                    src="images/image-2.jpg"
                    class="figure-img img-fluid rounded"
                    alt="Image 2">

                <figcaption class="figure-caption">
                    Image Two
                </figcaption>

            </figure>

        </div>

    </div>

</div>

در موبایل تصاویر زیر یکدیگر قرار می‌گیرند و در صفحه‌های بزرگ‌تر کنار هم قرار می‌گیرند.

Object Fit

گاهی تصویر داخل یک Box قرار دارد اما می‌خواهیم تصویر فضای مشخصی را پر کند.

در چنین شرایطی CSS Property به نام object-fit بسیار کاربردی است.

Bootstrap Utilityهای Object Fit نیز در اختیار ما قرار می‌دهد.

برای مثال:

<img
    src="images/product.jpg"
    class="object-fit-cover"
    alt="Product">

مقادیر رایج:

object-fit-contain
object-fit-cover
object-fit-fill
object-fit-scale
object-fit-none

در طراحی کارت‌ها، object-fit-cover بسیار کاربردی است.

مثال Object Fit

<div style="width: 300px; height: 200px;">

    <img
        src="images/product.jpg"
        class="w-100 h-100 object-fit-cover"
        alt="Product">

</div>

در این مثال:

• w-100 عرض کامل والد را می‌گیرد.

• h-100 ارتفاع کامل والد را می‌گیرد.

• object-fit-cover تصویر را برای پر کردن Box تنظیم می‌کند.

چرا Object Fit مهم است؟

فرض کنید کارت‌های محصولات داریم و تصاویر محصولات نسبت ابعاد متفاوتی دارند.

بدون مدیریت مناسب ممکن است ظاهر کارت‌ها یکسان نباشد:

+----------+   +----------+
|          |   |          |
|  Image   |   | Image    |
|          |   |          |
|          |   |          |
+----------+   +----------+

با تعیین اندازه مشخص و استفاده از object-fit-cover می‌توانیم ظاهر تصاویر را یکنواخت‌تر کنیم.

Responsive Image در Grid

یکی از کاربردهای مهم Bootstrap ترکیب تصاویر با Grid است.

مثال:

<div class="container">

    <div class="row g-4">

        <div class="col-12 col-sm-6 col-lg-4">

            <img
                src="images/image-1.jpg"
                class="img-fluid rounded"
                alt="Image 1">

        </div>

        <div class="col-12 col-sm-6 col-lg-4">

            <img
                src="images/image-2.jpg"
                class="img-fluid rounded"
                alt="Image 2">

        </div>

        <div class="col-12 col-sm-6 col-lg-4">

            <img
                src="images/image-3.jpg"
                class="img-fluid rounded"
                alt="Image 3">

        </div>

    </div>

</div>

رفتار Layout:

Mobile

+------------------+
|     Image 1      |
+------------------+
|     Image 2      |
+------------------+
|     Image 3      |
+------------------+


Desktop

+---------+---------+---------+
| Image 1 | Image 2 | Image 3 |
+---------+---------+---------+

ساخت گالری ساده

حالا یک گالری ساده با Bootstrap ایجاد کنیم:

<section class="py-5">

    <div class="container">

        <div class="text-center mb-5">

            <h2 class="fw-bold">
                Image Gallery
            </h2>

            <p class="text-secondary">
                Our latest photos
            </p>

        </div>

        <div class="row g-4">

            <div class="col-12 col-md-6 col-lg-4">

                <img
                    src="images/gallery-1.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="Gallery Image 1">

            </div>

            <div class="col-12 col-md-6 col-lg-4">

                <img
                    src="images/gallery-2.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="Gallery Image 2">

            </div>

            <div class="col-12 col-md-6 col-lg-4">

                <img
                    src="images/gallery-3.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="Gallery Image 3">

            </div>

            <div class="col-12 col-md-6 col-lg-4">

                <img
                    src="images/gallery-4.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="Gallery Image 4">

            </div>

            <div class="col-12 col-md-6 col-lg-4">

                <img
                    src="images/gallery-5.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="Gallery Image 5">

            </div>

            <div class="col-12 col-md-6 col-lg-4">

                <img
                    src="images/gallery-6.jpg"
                    class="img-fluid rounded-4 shadow"
                    alt="Gallery Image 6">

            </div>

        </div>

    </div>

</section>

این نمونه می‌تواند پایه یک Gallery واقعی باشد.

ساخت Product Image

فرض کنیم یک فروشگاه اینترنتی داریم.

<div class="container">

    <div class="row g-4 align-items-center">

        <div class="col-12 col-md-6">

            <img
                src="images/product.jpg"
                class="img-fluid rounded-4 shadow"
                alt="Product">

        </div>

        <div class="col-12 col-md-6">

            <h1 class="fw-bold">
                Professional Product
            </h1>

            <p class="text-secondary">
                This is a professional product description.
            </p>

            <h3 class="fw-bold">
                $99
            </h3>

            <button class="btn btn-primary mt-3">
                Add to Cart
            </button>

        </div>

    </div>

</div>

در موبایل:

+----------------------+
|                      |
|       Product        |
|       Image          |
|                      |
+----------------------+
| Product Title        |
| Description          |
| Price                |
| Add to Cart          |
+----------------------+

در صفحه‌های بزرگ‌تر:

+----------------------+----------------------+
|                      | Product Title        |
|      Product         | Description          |
|       Image          | Price                |
|                      | Add to Cart          |
+----------------------+----------------------+

Media Object

در طراحی رابط کاربری، گاهی نیاز داریم تصویر در کنار متن قرار بگیرد.

برای مثال:

+--------------------------------------+
| [Image]  Title                       |
|          Description                 |
|                                      |
+--------------------------------------+

این Layout را می‌توان با Flexbox ایجاد کرد.

<div class="d-flex align-items-start gap-3">

    <img
        src="images/user.jpg"
        width="64"
        height="64"
        class="rounded-circle"
        alt="User">

    <div>

        <h5 class="mb-1">
            John Smith
        </h5>

        <p class="mb-0 text-secondary">
            This is a user description.
        </p>

    </div>

</div>

این الگو برای:

• Comment

• User Profile

• Blog Author

• Notification

• Search Result

بسیار کاربردی است.

تصویر در کنار متن به صورت Responsive

می‌توانیم Layout را در موبایل تغییر دهیم.

<div class="d-flex flex-column flex-sm-row align-items-center gap-3">

    <img
        src="images/user.jpg"
        width="100"
        height="100"
        class="rounded-circle"
        alt="User">

    <div class="text-center text-sm-start">

        <h4>
            John Smith
        </h4>

        <p class="text-secondary mb-0">
            Web Developer
        </p>

    </div>

</div>

در موبایل:

+------------------+
|                  |
|      Image       |
|                  |
|      Name        |
|      Role        |
|                  |
+------------------+

در صفحه بزرگ‌تر:

+--------------------------------+
| [Image]  Name                  |
|          Role                  |
+--------------------------------+

Accessibility و alt

یکی از مهم‌ترین نکات هنگام کار با تصاویر، استفاده صحیح از alt است.

مثلاً:

<img
    src="images/laptop.jpg"
    alt="Black laptop on a desk">

این مقدار به کاربران و ابزارهایی که نمی‌توانند تصویر را ببینند کمک می‌کند محتوای تصویر را بهتر درک کنند.

اگر تصویر صرفاً تزئینی است، در شرایط مناسب می‌توان از alt="" استفاده کرد:

<img
    src="images/decoration.png"
    alt="">

نباید برای همه تصاویر یک متن تکراری مانند:

image
photo
picture

قرار دهیم.

alt باید در صورت نیاز، توضیح مفید و متناسب با محتوای تصویر ارائه کند.

نکته مهم درباره Performance

Responsive بودن تصویر تنها مسئله طراحی نیست.

تصاویر بزرگ می‌توانند سرعت بارگذاری صفحه را کاهش دهند.

برای پروژه‌های واقعی بهتر است:

• تصاویر را قبل از استفاده بهینه کنیم.

• از فرمت‌های مناسب مانند WebP یا AVIF در صورت پشتیبانی مناسب استفاده کنیم.

• تصاویر را با ابعاد واقعی موردنیاز صفحه تهیه کنیم.

• برای تصاویر خارج از Viewport از Lazy Loading استفاده کنیم.

مثلاً:

<img
    src="images/product.webp"
    class="img-fluid"
    loading="lazy"
    alt="Product">

برای تصویر اصلی بالای صفحه معمولاً باید با دقت بیشتری درباره Lazy Loading تصمیم گرفت؛ زیرا ممکن است تصویر اصلی صفحه نیاز داشته باشد سریع‌تر بارگذاری شود.

ساخت یک بخش کامل معرفی با تصویر

حالا یک نمونه کامل‌تر ایجاد کنیم:

<section class="py-5">

    <div class="container">

        <div class="row align-items-center g-5">

            <div class="col-12 col-lg-6">

                <img
                    src="images/team.jpg"
                    class="img-fluid rounded-4 shadow-lg"
                    alt="Development Team">

            </div>

            <div class="col-12 col-lg-6">

                <span class="text-primary fw-semibold">
                    ABOUT US
                </span>

                <h1 class="display-5 fw-bold mt-2">
                    Build Modern Digital Products
                </h1>

                <p class="lead text-secondary mt-3">
                    We create modern and responsive digital
                    experiences for businesses.
                </p>

                <div class="d-flex flex-column flex-sm-row gap-3 mt-4">

                    <button class="btn btn-primary">
                        Get Started
                    </button>

                    <button class="btn btn-outline-secondary">
                        Learn More
                    </button>

                </div>

            </div>

        </div>

    </div>

</section>

در این مثال از مفاهیم مقالات قبلی نیز استفاده کردیم:

Grid
Typography
Colors
Spacing
Flexbox
Responsive Design
Images

این دقیقاً همان چیزی است که در پروژه‌های واقعی اتفاق می‌افتد؛ معمولاً یک Component فقط از یک قابلیت Bootstrap استفاده نمی‌کند و چندین قابلیت با یکدیگر ترکیب می‌شوند.

اشتباهات رایج هنگام استفاده از تصاویر

1. فراموش کردن img-fluid

این کد:

<img src="images/large.jpg" alt="Image">

ممکن است در بعضی Layoutها باعث ایجاد مشکل شود.

در بسیاری از موارد بهتر است:

<img
    src="images/large.jpg"
    class="img-fluid"
    alt="Image">

استفاده شود.

2. نداشتن alt مناسب

این کد:

<img src="product.jpg">

اطلاعات لازم را برای Accessibility فراهم نمی‌کند.

بهتر است:

<img
    src="product.jpg"
    alt="Blue product package">

استفاده شود.

3. استفاده از تصاویر بسیار بزرگ

تصویری با ابعاد بسیار بزرگ را نباید بدون دلیل در یک Box کوچک نمایش دهیم.

بهینه‌سازی تصویر می‌تواند تأثیر قابل‌توجهی روی Performance داشته باشد.

4. استفاده نادرست از width و height

گاهی تعیین Width و Height نامناسب باعث کشیدگی تصویر می‌شود.

برای تصاویر حساس به نسبت ابعاد، باید به Aspect Ratio و object-fit توجه کنیم.

تمرین عملی

یک صفحه Portfolio برای یک طراح وب ایجاد کنید.

صفحه باید شامل موارد زیر باشد:

1. یک عنوان اصلی

2. یک تصویر معرفی

3. توضیح کوتاه

4. سه تصویر پروژه

5. استفاده از img-fluid

6. استفاده از rounded

7. استفاده از shadow

8. Layout Responsive

9. استفاده صحیح از alt

10. استفاده از Grid

در دسکتاپ، پروژه‌ها را سه‌ستونه کنید:

+---------+---------+---------+
| Project | Project | Project |
|   1     |   2     |   3     |
+---------+---------+---------+

و در موبایل:

+-------------------+
|     Project 1     |
+-------------------+
|     Project 2     |
+-------------------+
|     Project 3     |
+-------------------+

سعی کنید این تمرین را فقط با Bootstrap و HTML پیاده‌سازی کنید و فعلاً CSS اختصاصی ننویسید.

جمع‌بندی

در این مقاله با نحوه کار با تصاویر و Media در Bootstrap آشنا شدیم.

مهم‌ترین کلاس‌هایی که یاد گرفتیم عبارت‌اند از:

img-fluid
img-thumbnail
rounded
rounded-circle
figure
figure-img
figure-caption
object-fit-cover
w-100
h-100
shadow
border

یاد گرفتیم چگونه تصاویر را Responsive کنیم، گوشه‌های آن‌ها را گرد کنیم، Border و Shadow ایجاد کنیم و تصاویر را در Grid قرار دهیم.

همچنین با figure و figcaption برای ایجاد تصاویر همراه با توضیح آشنا شدیم.

در ادامه با object-fit آشنا شدیم و دیدیم چگونه می‌توان تصاویر را داخل Boxهای با اندازه مشخص مدیریت کرد.

در نهایت چند نمونه واقعی مانند Gallery، Product Section، User Profile و Hero Section ایجاد کردیم.