Menyesuaikan dan Ukuran gambar agar sesuai dengan div (bootstrap)

Saya mencoba untuk mendapatkan gambar agar sesuai dengan div ukuran tertentu. Sayangnya, gambar tersebut tidak sesuai dengan itu dan malah menyusut secara proporsional ke ukuran yang tidak cukup besar. Saya tidak yakin apa cara terbaik untuk mendapatkan gambar agar pas di dalamnya.

Jika ini tidak cukup kode, saya akan dengan senang hati menyediakan lebih banyak, dan saya terbuka untuk memperbaiki kesalahan lain yang saya abaikan.

Ini HTML-nya

<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 saya

.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;


}

Anda dapat secara eksplisit menentukan widthdan heightdari gambar, tetapi hasilnya mungkin bukan yang terbaik.

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

jsFiddle

... berdasarkan komentar Anda, Anda juga dapat memblokir apa saja overflow- lihat contoh ini untuk melihat gambar yang dibatasi oleh tinggi dan terpotong karena terlalu lebar.

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

.top1 img {
    height:100%;
}

Coba cara ini:

<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>

MEMPERBARUI:

Pada Bootstrap 4 img-responsivemenjadi img-fluid, maka solusi menggunakan Bootstrap 4 adalah:

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

Hanya kepala sampai yang Bootstrap 4 sekarang menggunakan img-fluidbukannyaimg-responsive , cek jadi ganda yang versi yang Anda gunakan jika Anda mengalami masalah.

Cukup tambahkan kelas img-responsiveke imgtag Anda , itu berlaku di bootstrap 3 dan seterusnya!

Saya memiliki masalah yang sama dan menemukan solusi sederhana berikut. Cukup tambahkan sedikit padding ke gambar dan itu mengubah ukurannya sendiri agar sesuai dengan div.

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

Saya menggunakan ini dan bekerja untuk saya.

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

Jika ada di antara Anda yang mencari Bootstrap-4 . Ini dia

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

Sebagian besar waktu, proyek bootstrap menggunakan jQuery, sehingga Anda dapat menggunakan jQuery.

Dapatkan saja lebar dan tinggi induk dengan JQuery.offsetHeight()dan JQuery.offsetWidth(), dan setel ke elemen anak dengan JQuery.width()danJQuery.height() .

Jika Anda ingin membuatnya responsif, ulangi juga langkah-langkah di atas di atas $(window).resize(func).