Ajustar el tamaño de la imagen para que se ajuste a un div (bootstrap)

Estoy tratando de hacer que una imagen se ajuste a un tamaño específico div. Desafortunadamente, la imagen no se ajusta a ella y, en cambio, se está reduciendo proporcionalmente a un tamaño que no es lo suficientemente grande. No estoy seguro de cuál es la mejor manera de lograr que la imagen encaje en su interior.

Si este código no es suficiente, me complacerá proporcionar más y estoy dispuesto a corregir cualquier otro error que esté pasando por alto.

Aquí está el 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>

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


}

Puede definir explícitamente el widthy heightde las imágenes, pero es posible que los resultados no sean los más atractivos.

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

jsFiddle

... según su comentario, también puede bloquear cualquiera overflow: vea este ejemplo para ver una imagen restringida por la altura y cortada porque es demasiado ancha.

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

.top1 img {
    height:100%;
}

Prueba de esta manera:

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

ACTUALIZAR:

En Bootstrap 4 se img-responsiveconvierte img-fluid, por lo que la solución que usa Bootstrap 4 es:

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

Solo un aviso que Bootstrap 4 ahora usa en img-fluidlugar deimg-responsive , así que verifique qué versión está usando si tiene problemas.

Simplemente agregue la clase img-responsivea su imgetiqueta, ¡es aplicable en bootstrap 3 en adelante!

Tuve este mismo problema y me encontré con la siguiente solución simple. Simplemente agregue un poco de relleno a la imagen y se redimensionará para adaptarse al div.

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

Usé esto y funciona para mí.

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

Si alguno de ustedes está buscando Bootstrap-4 . Aquí está

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

La mayoría de las veces, el proyecto bootstrap usa jQuery, por lo que puede usar jQuery.

Solo obtenga el ancho y el alto de padre con JQuery.offsetHeight()y JQuery.offsetWidth(), y configúrelos en el elemento hijo con JQuery.width()y JQuery.height().

Si desea que responda, repita también los pasos anteriores en el $(window).resize(func).