Bir div'e uyacak şekilde ayarlama ve görüntü boyutu (bootstrap)

Belirli bir div boyutuna sığacak bir resim elde etmeye çalışıyorum. Ne yazık ki, görüntü ona uymuyor ve bunun yerine orantılı olarak yeterince büyük olmayan bir boyuta küçülüyor. Görüntüyü içine sığdırmanın en iyi yolunun ne olduğundan emin değilim.

Bu yeterli kod değilse, daha fazlasını sağlamaktan memnuniyet duyarım ve gözden kaçırdığım diğer hataları düzeltmeye açığım.

İşte 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'm

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


}

Görüntülerin widthve değerlerini açıkça tanımlayabilirsiniz height, ancak sonuçlar en iyi görünen olmayabilir.

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

jsFiddle

... yorumunuza göre, herhangi birini engelleyebilirsiniz overflow- bu örneğe bakın ve yüksekliği kısıtlanmış bir resmi görmek için ve çok geniş olduğu için kesilmiş bir resmi görmek için.

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

.top1 img {
    height:100%;
}

Şu yolu deneyin:

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

GÜNCELLEME:

Özyükleme 4'te img-responsiveolur img-fluid, bu nedenle, özyükleme 4 kullanılarak çözüm:

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

Bilmenizi isteriz kadar Bootstrap 4 şimdi kullandığı img-fluidyerineimg-responsive sorunlarla yaşıyorsanız kullandığınız sürüm, yani tekrar kontrol.

Basitçe sınıf eklemek img-responsiveiçin için imgetiketi, bu ileriye bootstrap 3 geçerlidir!

Aynı sorunu yaşadım ve aşağıdaki basit çözüme rastladım. Görüntüye biraz dolgu ekleyin ve kendisini div içine sığacak şekilde yeniden boyutlandırın.

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

Bunu kullandım ve benim için çalışıyor.

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

Herhangi biriniz Bootstrap-4'ü arıyorsanız . İşte burada

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

Çoğu zaman, bootstrap projesi jQuery kullanır, böylece jQuery kullanabilirsiniz.

Sadece ile genişliği ve ebeveyn yüksekliğini almak JQuery.offsetHeight()ve JQuery.offsetWidth()ve çocuk elemana bunları JQuery.width()ve JQuery.height().

Duyarlı hale getirmek istiyorsanız, yukarıdaki adımları da tekrarlayın $(window).resize(func).