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

97

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;


}
html css twitter-bootstrap smilefreak24
fuente
He publicado una respuesta a una pregunta similar aquí: stackoverflow.com/questions/41870216/…
FredyWenger

Respuestas:

57

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%;
}
jterry
fuente
Busqué hacer eso, desafortunadamente como dijiste, los resultados no son los mejores. Idealmente, me gustaría que las imágenes se redujeran para que la altura de la imagen se ajuste a la altura del div, y el ancho de la imagen que exceda el ancho del div restrictivo estaría oculto. Si eso tiene sentido
smilefreak24
¡Sí, eso es lo que estoy buscando! Muchas gracias!
smilefreak24
La OTRA respuesta es la mejor, simplemente agregar class = "img-responsive" a la etiqueta img hace el truco!
iMobaio
1
mejor width:100%;es max-width:100%;y mejor todos ellos son clase img-responsiveen BS3 o img-fluiden BS4.
Nabi KAZ
167

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>
Shafeeque S
fuente
5
¡Frio! class = "img-responsive" ayudó. Quizás esta debería ser la respuesta aceptada hoy.
Anupam
1
class = "img-responsive" es definitivamente el camino a seguir! Esta debería ser la respuesta aceptada.
iMobaio
28
es img-fluidahora, noimg-responsive
palabras por cierto
32

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

Shashi
fuente
Lo siento, pero ¿podría ser específico? No recibo su pregunta correctamente. ¡Gracias!
Shashi
7

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>
Wiltonio
fuente
1
Resuelto con Bootstrap en lugar de CSS personalizado. Gracias.
mattgreen
7

Usé esto y funciona para mí.

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

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>
Diestro
fuente
esta no es la solución ideal si tiene otra columna con texto en ella, ya que también será difícil contra el borde del borde
James Burke
2

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

Mohsen
fuente