تصاویر در بوت استرپ (Images in Bootstrap)

در حالی که روش پایه‌ای برای قرار دادن تصاویر در HTML همچنان استفاده از تگ <img src=""> است، فریم‌ورک Bootstrap مجموعه‌ای از کلاس‌ها و ابزارهای قدرتمند را ارائه می‌دهد که به طور قابل توجهی نحوه مدیریت و استایل‌دهی تصاویر را در طراحی‌های واکنش‌گرا بهبود می‌بخشد. این راهنمای جامع شما را فراتر از درج ساده تصاویر می‌برد و پتانسیل کامل تصاویر در بوت استرپ را برای استفاده مؤثر از آنها در اندازه‌های مختلف صفحه و در زمینه‌های متنوع طراحی بررسی می‌کند.

پایه‌: تصاویر واکنش‌گرا با کلاس `.img-fluid`

سنگ‌بنای مدیریت تصویر در Bootstrap، کلاس .img-fluid است. با اعمال این کلاس به یک تگ <img>، تصویر به طور واکنش‌گرا با اندازه عنصر والد خود مقیاس‌بندی می‌شود.

نحوه کار: کلاس .img-fluid در اصل ویژگی‌های max-width: 100%; و height: auto; را روی تصویر اعمال می‌کند. این یعنی تصویر هرگز از عرض عنصر والد خود بیشتر نمی‌شود، که از شکست طرح در صفحه‌نمایش‌های کوچک جلوگیری می‌کند. همچنین height: auto نسبت ابعاد تصویر را در هنگام تغییر اندازه حفظ می‌کند.

زمان استفاده: تقریباً باید این کلاس را روی تمام تصاویر محتوایی‌تان اعمال کنید تا از واکنش‌گرا بودن آن‌ها مطمئن شوید.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <img src="https://img.freepik.com/free-photo/pug-dog-isolated-white-background_2829-11416.jpg" class="img-fluid" alt="Responsive Image">
    </div>
    <div class="col-md-6">
      <p>متنی همراه با تصویر...</p>
    </div>
  </div>
</div>

استایل‌دهی تصاویر: ترازبندی و قاب‌ها

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

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

.float-start: تصویر را به چپ می‌برد.
.float-end: تصویر را به راست می‌برد.
.mx-auto.d-block: تصویر را به‌صورت افقی در وسط عنصر والد بلاک‌سطح قرار می‌دهد.

<img src="..." width="200" height="200" class="img-fluid float-start me-3" alt="چپ‌چین">
<p>متن در اطراف تصویر چپ‌چین...</p>

<img src="..." width="200" height="200" class="img-fluid float-end ms-3" alt="راست‌چین">
<p>متن در اطراف تصویر راست‌چین...</p>

<img src="..." width="200" height="200" class="img-fluid mx-auto d-block" alt="وسط‌چین">

قاب و گوشه‌های گرد:

.rounded: گوشه‌های گرد ساده
.rounded-circle: تصویر را به شکل دایره درمی‌آورد (تصویر باید مربعی باشد)
.rounded-*: درجه‌های مختلف گردی (مثلاً .rounded-top, .rounded-pill)
.border: یک قاب پیش‌فرض اضافه می‌کند
.border-*: قاب با رنگ سفارشی طبق رنگ‌های Bootstrap (مثل .border-primary, .border-success)

<img src="..." class="img-fluid rounded m-2" alt="تصویر با گوشه گرد">
<img src="..." class="img-fluid rounded-circle" alt="تصویر دایره‌ای" style="width: 150px; height: 150px;">
<img src="..." class="img-fluid border border-5 border-dark" alt="تصویر با قاب تیره">

تصاویر Thumbnail

کلاس .img-thumbnail روشی ساده برای نمایش تصاویر به‌صورت بندانگشتی ارائه می‌دهد. این کلاس قاب نازک و فاصله‌ای اطراف تصویر ایجاد می‌کند.

<a href="large-image.jpg" target="_blank">
  <img src="..." class="img-thumbnail m-2" alt="بندانگشتی تصویر">
</a>

استفاده از `<figure>` و `<figcaption>` برای ساختار معنایی تصاویر

برای ارتباط معنایی بین تصویر و کپشن آن، می‌توان از عناصر <figure> و <figcaption> همراه با کلاس‌های .figure و .figure-caption استفاده کرد.

<figure class="figure m-2">
  <img src="..." class="figure-img img-fluid rounded" alt="چشم‌انداز زیبا">
  <figcaption class="figure-caption text-end">نمای پانوراما</figcaption>
</figure>

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

در حالی که تگ <img> تصاویر را به عنوان محتوای صفحه درج می‌کند، گاهی لازم است از تصاویر به عنوان پس‌زمینه استفاده شود.

استفاده از CSS سفارشی:

با استفاده از ویژگی background-image در CSS همراه با background-size, background-repeat و background-position می‌توان کنترل کاملی بر نمایش تصویر داشت.

<div class="jumbotron bg-image" style="background-image: url('background.jpg'); height: 300px; color: white; text-align: center;">
  <h1>خوش آمدید!</h1>
  <p>متنی روی تصویر پس‌زمینه.</p>
</div>

<style>
  .bg-image {
    background-size: cover;
    background-position: center;
  }
</style>

ابزارهای Bootstrap برای پس‌زمینه:

کلاس‌های .bg-* معمولاً برای رنگ‌های یک‌دست هستند، اما برای تصاویر پس‌زمینه باید از استایل‌دهی سفارشی استفاده کنید.

استفاده از تگ `<picture>` برای سازگاری بیشتر و عملکرد بهتر

برای کنترل دقیق‌تر بر نمایش تصاویر در اندازه‌ها و فرمت‌های مختلف، می‌توانید از عنصر <picture> همراه با سیستم گرید Bootstrap بهره ببرید.

<picture>
  <source media="(max-width: 576px)" srcset="image-small.jpg">
  <source media="(max-width: 992px)" srcset="image-medium.jpg">
  <img src="image-large.jpg" alt="تصویر واکنش‌گرا" class="img-fluid">
</picture>

مرورگر بر اساس اندازه صفحه و قابلیت‌ها، مناسب‌ترین تصویر را بارگذاری می‌کند. تگ <img> به‌عنوان جایگزین پیش‌فرض در صورتی که هیچ‌کدام از شرایط <source> برآورده نشود استفاده می‌شود.

نکات مهم برای عملکرد و دسترسی‌پذیری:

بهینه‌سازی تصویر: تصاویر را فشرده‌سازی کنید تا حجم آن‌ها کم شده و سرعت بارگذاری افزایش یابد. ابزارهایی مثل TinyPNG، ImageOptim یا ShortPixel مفیدند.
بارگذاری تنبل (Lazy Loading): برای تصاویری که در بخش پایینی صفحه هستند، از ویژگی loading="lazy" استفاده کنید تا تصویر هنگام ورود به محدوده دید بارگذاری شود.

<img src="large-image.jpg" class="img-fluid" alt="تصویر Lazy Load شده" loading="lazy">

ویژگی alt: همیشه برای تصاویر متن جایگزین (alt) بنویسید. این موضوع هم برای دسترسی کاربران نابینا و هم برای بهینه‌سازی موتور جستجو (SEO) اهمیت دارد.
فرمت مناسب تصویر: بسته به نیاز از فرمت مناسب استفاده کنید؛ JPEG برای عکس، PNG برای گرافیک با شفافیت، و WebP برای مرورگرهای مدرن با کیفیت و حجم بهتر.

مثال ۱: تصاویر واکنش‌گرا با کلاس `.img-fluid`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Responsive Image</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <img src="https://via.placeholder.com/600/FFC107/000000?Text=Image+600px" class="img-fluid" alt="Responsive Image">
            </div>
            <div class="col-md-6">
                <p>This image will scale down proportionally if the viewport or its container becomes smaller than its original width.</p>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال یک تصویر با عرض ۶۰۰ پیکسل را درون یک کانتینر با ۶ ستون در نقطه شکست (Breakpoint) متوسط نشان می‌دهد. وقتی پنجره مرورگر را کوچک‌تر از ۶۰۰ پیکسل یا عرض کانتینر کنید، تصویر به طور خودکار مقیاس‌بندی می‌شود تا درون کانتینر جا بگیرد و از آن بیرون نزند.

مثال ۲: ترازبندی تصویر (کلاس‌های `.float-start`, `.float-end`, `.mx-auto d-block`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Image Alignment</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container > div { border: 1px solid #eee; padding: 15px; margin-bottom: 15px; }
    </style>
</head>
<body>
    <div class="container">
        <div>
            <img src="https://via.placeholder.com/150/007BFF/FFFFFF?Text=Left" class="img-fluid float-start me-3" alt="Floated Left">
            <p>This image is floated to the left, allowing the text to wrap around it.</p>
        </div>
        <div>
            <img src="https://via.placeholder.com/150/28A745/FFFFFF?Text=Right" class="img-fluid float-end ms-3" alt="Floated Right">
            <p>This image is floated to the right, with text wrapping to its left.</p>
        </div>
        <div>
            <img src="https://via.placeholder.com/150/DC3545/FFFFFF?Text=Center" class="img-fluid mx-auto d-block" alt="Centered Image">
            <p class="text-center">This image is centered horizontally within its container.</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال نشان می‌دهد چگونه می‌توان با استفاده از کلاس‌های Bootstrap، تصاویر را به سمت چپ یا راست شناور کرد و متن را در اطراف آن قرار داد. همچنین نحوه مرکز‌چین کردن یک تصویر در عنصر والد بلاک‌سطح را نمایش می‌دهد.

مثال ۳: قاب تصویر (کلاس‌های `.rounded`, `.rounded-circle`, `.border`, `.border-*`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Image Borders</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container img { margin-right: 10px; margin-bottom: 10px; }
    </style>
</head>
<body>
    <div class="container mt-3">
        <h2>Rounded Images</h2>
        <img src="https://via.placeholder.com/100/6610f2/FFFFFF?Text=Rounded" class="img-fluid rounded" alt="Rounded Image">
        <img src="https://via.placeholder.com/100/1E88E5/FFFFFF?Text=Circle" class="img-fluid rounded-circle" alt="Circle Image" style="width: 100px; height: 100px;">
        <img src="https://via.placeholder.com/200/00C853/FFFFFF?Text=Pill" class="img-fluid rounded-pill" alt="Pill Image">

        <h2 class="mt-3">Bordered Images</h2>
        <img src="https://via.placeholder.com/100/FF9800/FFFFFF?Text=Border" class="img-fluid border" alt="Bordered Image">
        <img src="https://via.placeholder.com/100/F44336/FFFFFF?Text=Primary" class="img-fluid border border-primary" alt="Primary Border">
        <img src="https://via.placeholder.com/100/9C27B0/FFFFFF?Text=Success" class="img-fluid border border-success" alt="Success Border">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال نحوه اعمال گوشه‌های گرد (از جمله گرد کامل و به شکل قرص) و افزودن قاب‌های رنگی مختلف به تصاویر را با استفاده از کلاس‌های کمکی Bootstrap نمایش می‌دهد.

مثال ۴: تصاویر بندانگشتی با کلاس `.img-thumbnail`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Image Thumbnails</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .container a { margin-right: 10px; }
    </style>
</head>
<body>
    <div class="container mt-3">
        <h1>Image Thumbnails</h1>
        <a href="https://via.placeholder.com/800/4CAF50/FFFFFF?Text=Large+Image" target="_blank">
            <img src="https://via.placeholder.com/150/4CAF50/FFFFFF?Text=Thumbnail" class="img-thumbnail" alt="Image Thumbnail">
        </a>
        <a href="https://via.placeholder.com/800/3F51B5/FFFFFF?Text=Another+Large+Image" target="_blank">
            <img src="https://via.placeholder.com/150/3F51B5/FFFFFF?Text=Thumbnail" class="img-thumbnail" alt="Another Thumbnail">
        </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال نشان می‌دهد که چگونه کلاس .img-thumbnail یک قاب ظریف و مقداری فاصله (padding) به تصویر اضافه می‌کند، که ظاهر آن را شبیه بندانگشتی کرده و می‌تواند به نسخه بزرگ‌تر تصویر لینک شود.

مثال ۵: استفاده از Figure و Caption (`<figure>`, کلاس `.figure`, عنصر `<figcaption>`, کلاس `.figure-caption`)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Figure and Caption</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3">
        <figure class="figure">
            <img src="https://via.placeholder.com/400/FBC02D/FFFFFF?Text=Figure+Image" class="figure-img img-fluid rounded" alt="A figure image">
            <figcaption class="figure-caption text-end">A caption for the above image.</figcaption>
        </figure>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال گروه‌بندی معنایی تصویر و توضیح آن را با استفاده از عناصر HTML یعنی <figure> و <figcaption>، همراه با کلاس‌های مربوطه در Bootstrap برای استایل‌دهی، نمایش می‌دهد. کپشن با استفاده از کلاس .text-end در سمت راست تراز شده است.

مثال ۶: تصویر پس‌زمینه (با استفاده از CSS سفارشی)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Background Image</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .bg-image-container {
            background-image: url('https://via.placeholder.com/1200/0D8E81/FFFFFF?Text=Background+Image');
            background-size: cover;
            background-position: center;
            height: 300px;
            color: white;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="container mt-3">
        <div class="bg-image-container">
            <h1>Welcome!</h1>
            <p>This text is overlayed on a background image.</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال نشان می‌دهد که چگونه می‌توان با استفاده از CSS سفارشی، یک تصویر پس‌زمینه را برای یک عنصر <div> تنظیم کرد. ویژگی background-size: cover; باعث می‌شود تصویر کل فضای کانتینر را بپوشاند، و background-position: center; آن را در مرکز قرار می‌دهد. همچنین با Flexbox محتوای متنی داخل به‌صورت عمودی و افقی در مرکز قرار می‌گیرد.

مثال ۷: استفاده از عنصر `<picture>` برای جهت‌دهی بصری (Art Direction)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Picture Element</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-3">
        <picture>
            <source media="(max-width: 576px)" srcset="https://via.placeholder.com/300/90CAF9/FFFFFF?Text=Small">
            <source media="(max-width: 992px)" srcset="https://via.placeholder.com/600/90CAF9/FFFFFF?Text=Medium">
            <img src="https://via.placeholder.com/1200/90CAF9/FFFFFF?Text=Large" alt="Adaptable Image" class="img-fluid">
        </picture>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

توضیح: این مثال از عنصر <picture> استفاده می‌کند تا بسته به عرض صفحه مرورگر، تصاویر با اندازه‌های مختلف را بارگذاری کند. این کار باعث می‌شود در صفحه‌نمایش‌های کوچک‌تر، تصاویر کم‌حجم‌تری بارگذاری شوند که عملکرد بهتری به همراه دارد. تگ <img> نیز به‌عنوان نسخه پشتیبان برای مرورگرهایی که از <picture> پشتیبانی نمی‌کنند عمل می‌کند.

نتیجه‌گیری: تسلط بر عناصر تصویری با Bootstrap

Bootstrap پایه‌ای قدرتمند برای مدیریت واکنش‌گرای تصاویر و اعمال استایل‌های پایه‌ای فراهم می‌کند. با استفاده از کلاس‌هایی مثل .img-fluid، ابزارهای ترازبندی، قاب‌دهی، و عناصر معنایی مانند <figure>، می‌توانید تصاویر جذابی را در طراحی‌های خود به‌طور یکپارچه قرار دهید.

برای موارد پیشرفته‌تر مثل تصاویر پس‌زمینه و جهت‌دهی بصری، ترکیب سیستم گرید Bootstrap با CSS سفارشی و عنصر <picture> راه‌حل‌هایی قدرتمند ارائه می‌دهد.

همیشه به بهینه‌سازی تصاویر و رعایت اصول دسترسی‌پذیری توجه داشته باشید تا تجربه‌ای سریع، فراگیر و کاربرپسند فراهم شود. با این ابزارها و ملاحظات، می‌توانید با اطمینان مدیریت تصاویر را به‌عنوان بخشی حیاتی از اپلیکیشن‌های تحت وب مبتنی بر Bootstrap در دست بگیرید.