پرسش
چطور میتونم تصویر رو در وسط صفحه و به صورت ریسپانسیو با بوت استرپ قرار بدم؟
How can I center a responsive image in Bootstrap 5?
من نیاز دارم که یک تصویر رو به صورت ریسپانسیو و در وسط صفحه با استفاده از بوت استرپ قرار بدم
1403/05/30
پاسخ
مهرشاد براتی
سلام برای قرار دادن یک تصویر به صورت ریسپانسیو و در وسط صفحه باید تنظیم موقعیت و اندازه تصویر رو انجام بدی. در اینجا یک مثال ساده برات میزنم
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>تصویر ریسپانسیو در وسط صفحه</title> <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container text-center"> <img src="https://via.placeholder.com/800x400" class="img-fluid" alt="Responsive image"> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script> </body> </html>
container باعث میشه که محتوا به طور خودکار در مرکز صفحه قرار بگیره و حاشیه های جانبی ایجاد کنه
text-center متن‌ها رو در وسط قرار میده که در اینجا برای وسط چین کردن تصویر استفاده شده
کلاس img-fluid تصویر رو به صورت ریسپانسیو می‌کنه تا در اندازه های مختلف صفحه نمایش، به خوبی نمایش داده بشن.
با استفاده از این کد، تصویر شما در وسط صفحه قرار میگیره و به صورت ریسپانسیوه
پاسخ: 1403/05/30
آخرین آپدیت: 1403/07/15