Como criar uma imagem responsiva que também aumenta no Bootstrap 3

Atualmente, estou usando o bootstrap 3 do Twitter e estou enfrentando um problema para criar uma imagem responsiva. Eu usei img-responsiveclasse. Mas o tamanho da imagem não está aumentando. Se eu usar em width:100%vez de max-width:100%, ele funcionará perfeitamente. Onde está o problema? Este é o meu código:

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

A classe de imagem responsiva do Bootstrap é definida max-widthcomo 100%. Isso limita seu tamanho, mas não o força a esticar para preencher elementos pais maiores do que a própria imagem. Você teria que usar o widthatributo para forçar o aumento de escala.

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

Coisas certas!

.img-responsive é a maneira certa de tornar as imagens responsivas com bootstrap 3 Você pode adicionar alguma regra de altura para a imagem que deseja tornar responsiva, pois com responsabilidade, a largura muda ao longo da altura, conserte e pronto.

Não tenho certeza se isso ajuda você ainda ... mas eu tive que fazer um pequeno truque para aumentar a imagem, mas mantendo-a responsiva

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

}

Espero que ajude PS A largura máxima pode ser o que você quiser

Se definir uma largura fixa na imagem não for uma opção, aqui está uma solução alternativa.

Ter um div pai com display: table & table-layout: fixed. Em seguida, definindo a imagem a ser exibida: table-cell e max-width para 100%. Dessa forma, a imagem se ajustará à largura de seu pai.

Exemplo:

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

Fiddle: http://jsfiddle.net/5y62c4af/

Tente o seguinte em sua folha de estilo CSS:

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

Tente fazer isso:

1) Em seu 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) Em seu style.css

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

Descobri que você pode colocar a classe .col na imagem. No entanto, isso fornece um preenchimento extra junto com quaisquer outros atributos associados à classe, como float para a esquerda, no entanto, eles podem ser cancelados, digamos, por exemplo, um sem preenchimento classe como um acréscimo.

Eu acho que a imagem está corrompida. Exemplo: o tamanho da imagem é 195px X 146px.

Funcionará em resoluções mais baixas, como tablets. Quando você tiver uma resolução de 1280 X 800, ela será forçada a um tamanho maior, pois também terá uma largura de 100%. Talvez CSS dentro da consulta de mídia, como fontes de ícones, seja a melhor solução.