Cómo crear una imagen receptiva que también se amplía en Bootstrap 3

Actualmente estoy usando twitter bootstrap 3 y tengo un problema para crear una imagen receptiva. He usado img-responsiveclase. Pero el tamaño de la imagen no aumenta. Si lo uso en width:100%lugar de max-width:100%entonces funciona perfectamente. ¿Dónde está el problema? Este es mi codigo:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

La clase de imagen receptiva de Bootstrap se establece max-widthen 100%. Esto limita su tamaño, pero no lo obliga a estirarse para llenar elementos principales más grandes que la imagen misma. Tendría que usar el widthatributo para forzar la ampliación.

http://getbootstrap.com/css/#images-responsive

¡Cosas seguras!

.img-responsive es la forma correcta de hacer que las imágenes respondan con bootstrap 3. Puede agregar alguna regla de altura para la imagen que desea hacer receptiva, porque con responsabilidad, el ancho cambia a lo largo de la altura, arréglelo y listo.

Aún no estoy seguro de si te ayuda ... pero tuve que hacer un pequeño truco para agrandar la imagen pero mantenerla receptiva

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

Espero que te ayude PD: el ancho máximo puede ser el que quieras

Si establecer un ancho fijo en la imagen no es una opción, aquí hay una solución alternativa.

Tener un div padre con display: table & table-layout: fixed. Luego, establezca la imagen para mostrar: celda de tabla y ancho máximo al 100%. De esa forma, la imagen se ajustará al ancho de su padre.

Ejemplo:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Violín: http://jsfiddle.net/5y62c4af/

Pruebe lo siguiente en su hoja de estilo CSS:

.img-responsive{
  max-width: 100%;
  height: auto;
}

Intenta hacerlo:

1) En su index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) En tu style.css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Descubrí que puedes poner la clase .col en la imagen para hacer el truco; sin embargo, esto le da un relleno adicional junto con cualquier otro atributo asociado con la clase, como flotar a la izquierda, sin embargo, estos pueden cancelarse, por ejemplo, sin relleno. clase como una adición.

Supongo que la imagen está corrupta. Ejemplo: el tamaño de la imagen es 195px X 146px.

Funcionará dentro de resoluciones más bajas como tabletas. Cuando tenga una resolución de 1280 X 800, se forzará más grande ya que también hay un ancho del 100%. Quizás CSS dentro de la consulta de medios como fuentes de iconos es la mejor solución.