Regolazione e dimensione dell'immagine per adattarsi a un div (bootstrap)

Sto cercando di ottenere un'immagine che si adatti a una dimensione div specifica. Sfortunatamente, l'immagine non è conforme ad essa e si riduce invece proporzionalmente a una dimensione che non è abbastanza grande. Non sono sicuro di quale sia il modo migliore per ottenere che l'immagine si adatti al suo interno.

Se questo codice non è sufficiente, sarei felice di fornirne di più e sono aperto a correggere eventuali altri errori che sto trascurando.

Ecco l'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>

Il mio 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;


}

Puoi definire esplicitamente il widthe heightdelle immagini, ma i risultati potrebbero non essere i migliori.

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

jsFiddle

... secondo il tuo commento, potresti anche bloccare qualsiasi overflow- guarda questo esempio per vedere un'immagine limitata dall'altezza e tagliata perché è troppo ampia.

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

.top1 img {
    height:100%;
}

Prova in questo modo:

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

AGGIORNARE:

In Bootstrap 4 img-responsivediventa img-fluid, quindi la soluzione che utilizza Bootstrap 4 è:

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

Solo un avvertimentoimg-fluidimg-responsive che Bootstrap 4 ora usa invece di , quindi controlla attentamente quale versione stai utilizzando se hai problemi.

Aggiungi semplicemente la classe img-responsiveal tuo imgtag, è applicabile dal bootstrap 3 in poi!

Ho avuto lo stesso problema e sono incappato nella seguente semplice soluzione. Basta aggiungere un po 'di riempimento all'immagine e si ridimensiona per adattarsi al div.

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

L'ho usato e funziona per me.

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

Se qualcuno di voi sta cercando Bootstrap-4 . Ecco qui

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

Il più delle volte, il progetto bootstrap usa jQuery, quindi puoi usare jQuery.

Basta ottenere la larghezza e l'altezza del genitore con JQuery.offsetHeight()e JQuery.offsetWidth()e impostarle sull'elemento figlio con JQuery.width()e JQuery.height().

Se vuoi renderlo reattivo, ripeti i passaggi precedenti anche nel file $(window).resize(func).