Pregunta Ajuste y tamaño de imagen para adaptarse a un div (bootstrap)


Estoy tratando de obtener una imagen para que quepa en un div de tamaño específico. Desafortunadamente, la imagen no se ajusta a ella y, en cambio, se reduce proporcionalmente a un tamaño que no es lo suficientemente grande. No estoy seguro de cuál es la mejor manera de conseguir que la imagen quepa en su interior.

Si no se trata de un código suficiente, me gustaría 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;


}

64
2018-05-09 16:08


origen


Respuestas:


Puedes definir explícitamente width y height de imágenes, pero los resultados pueden no ser los mejores.

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

jsFiddle


... según su comentario, también podría simplemente bloquear cualquier overflow - ver este ejemplo para ver una imagen restringida por altura y cortada porque es demasiado ancha.

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

.top1 img {
    height:100%;
}

42
2018-05-09 16:13



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

112
2018-05-15 06:19



Solo un aviso que Bootstrap 4 ahora usa img-fluid en lugar de img-responsive, por lo que debe verificar qué versión está usando si tiene problemas.


29
2018-04-26 02:44



Simplemente agrega la clase img-responsive para usted img etiqueta, es aplicable en bootstrap 3 en adelante!


26
2018-03-11 10:18



Tuve el mismo problema y tropecé con la siguiente solución simple. Simplemente agregue un poco de relleno a la imagen y se redimensiona para caber dentro del div.

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

6
2017-10-29 03:07



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

Solo obtenga el ancho y la altura del elemento principal con JQuery.offsetHeight() y JQuery.offsetWidth()y establecerlos en el elemento secundario con JQuery.width() y JQuery.height().

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


1
2017-07-02 23:04



Usé esto y funciona para mí.

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

1
2018-04-19 03:26