علی صبایی
2 سال پیش توسط علی صبایی مطرح شد
4 پاسخ

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

سلام دوستان وقت بخیر خسته نباشین
من میخوام تصاویری که داخل 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="<?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

ثبت پرسش جدید
Banana Life
@shift.delete 2 سال پیش آپدیت شد
1

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


میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 2 سال پیش مطرح شد
Banana Life
@shift.delete 2 سال پیش آپدیت شد
1

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


علی صبایی
تخصص : برنامه نویس جنگو
@aiub.safi 2 سال پیش مطرح شد
0

ممنون ازت.


علی صبایی
تخصص : برنامه نویس جنگو
@aiub.safi 2 سال پیش مطرح شد
0

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


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

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