การปรับและขนาดภาพให้พอดีกับ div (bootstrap)

ฉันกำลังพยายามทำให้ภาพพอดีกับ div ขนาดที่กำหนด น่าเสียดายที่รูปภาพไม่เป็นไปตามสัดส่วนและแทนที่จะย่อขนาดให้เป็นขนาดที่ไม่ใหญ่พอ ฉันไม่แน่ใจว่าวิธีที่ดีที่สุดคือวิธีใดในการทำให้ภาพพอดีกับภายใน

หากรหัสนี้ไม่เพียงพอฉันยินดีที่จะจัดหาเพิ่มเติมและฉันพร้อมที่จะแก้ไขข้อผิดพลาดอื่น ๆ ที่ฉันมองข้ามไป

นี่คือ HTML

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

CSS ของฉัน

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

คุณสามารถกำหนดwidthและheightของรูปภาพอย่างชัดเจนได้แต่ผลลัพธ์อาจไม่ได้ดูดีที่สุด

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

... ตามความคิดเห็นของคุณคุณสามารถบล็อกอะไรก็ได้overflow- ดูตัวอย่างนี้เพื่อดูรูปภาพที่จำกัดความสูงและถูกตัดออกเพราะกว้างเกินไป

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

ลองวิธีนี้:

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

อัพเดท:

ใน Bootstrap 4 img-responsiveจะกลายเป็นimg-fluidดังนั้นวิธีแก้ปัญหาโดยใช้ Bootstrap 4 คือ:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

โปรดทราบว่าตอนนี้ Bootstrap 4 ใช้img-fluidแทนimg-responsiveดังนั้นโปรดตรวจสอบอีกครั้งว่าคุณกำลังใช้เวอร์ชันใดหากคุณมีปัญหา

เพียงเพิ่มคลาสimg-responsiveลงในimgแท็กของคุณก็สามารถใช้ได้ใน bootstrap 3 เป็นต้นไป!

ฉันมีปัญหาเดียวกันนี้และพบวิธีแก้ปัญหาง่ายๆดังต่อไปนี้ เพียงแค่เพิ่มช่องว่างภายในรูปภาพเล็กน้อยแล้วปรับขนาดเองให้พอดีกับ div

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

ฉันใช้สิ่งนี้และได้ผลสำหรับฉัน

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

หากท่านใดที่กำลังมองหา Bootstrap-4 . นี่คือ

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

โดยส่วนใหญ่แล้วโครงการ bootstrap จะใช้ jQuery ดังนั้นคุณจึงสามารถใช้ jQuery ได้

เพียงแค่รับความกว้างและความสูงของพาเรนต์ด้วยJQuery.offsetHeight()และJQuery.offsetWidth()และตั้งค่าเป็นองค์ประกอบลูกด้วยJQuery.width()และJQuery.height()และ

หากคุณต้องการให้ตอบสนองให้ทำซ้ำขั้นตอนข้างต้นในส่วน$(window).resize(func)นี้ด้วย