راکت
حل شده

نحوه قرار گیری عکس ها داخل col در بوت استرپ

4 پاسخ

سلام دوستان وقت بخیر خسته نباشین
من میخوام تصاویری که داخل col های بوت استرپ میزارم از راست و چپ و بالا حاشیه سفید نداشته باشه و بصورت کامل و فیت داخل col قرار بگیره
ممنون میشم راهنماییم بکنید
کد م به این شکل هست

    .item .img{
    width: 100%;
    height: 100%;
    padding: 5px;
    display:cover;
    }

         <div class="col-md-3 col-xs-12 col-sm-12">

            <div class="item">
               <p class="image-centeraiub">
                   <img src="<?php  the_post_thumbnail_url(); ?> " style="width: 65px;height: 65px; alt="">
               <p>
               <h3 ><?php the_title(); ?>   </h3>
               <p><?php the_excerpt() ?>   </p>
               <a href="https://roocket.ir/<?php the_permalink() ?>" style="text-align:center;" > ادامه مطلب</a></p>
            </div>

        </div> ```

نتیجه  درحال حاضر به این شکل زیر هست و با فاصله که میخوام این فضای خالی بالا و چپ و راست عکس رو حذف کنم و col های بوت استرپ  رو کاور کنه
![ تصویر][1]

  [1]: https://static.roocket.ir/images/editor/2022/6/2/GsyMRevg8ucguezYSFdh9FwTLD0ExlfvRpbzE9fP.png
ثبت پرسش جدید

پاسخ‌ها

4
Banana Life
Banana Life
@shift.delete
بهترین پاسخ

سلام
واسه کلاس تگ img اینو img-fluid بنویسید و نیازی هم نیست که تگ img را داخل p قرار بدید.برای درک بهتر نگاهی به کامپوننت کارت بوت استرب بندازید

میلاد-م
میلاد-م
@milad

تخصص: توسعه‌دهنده رابط کاربری - Front-End

علی صبایی
علی صبایی
@aiub.safi

تخصص: برنامه نویس جنگو

ممنون ازت.

شاید پاسخ شما همین‌جا باشد

علی صبایی
علی صبایی
@aiub.safi

تخصص: برنامه نویس جنگو

باتشکر از میلاد بهترین راه حل همین کلاس card بود

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

ورود یا ثبت‌نام