Como fazer uma imagem responsiva usando bootstrap sem ter que assumir toda a largura da divisão?

Qualquer pessoa que tenha usado o twitter bootstrap sabe que uma imagem pode ser tornada sensível usando a classe {[[0]} na tag html img. No entanto, estas imagens ocupam 100% da largura da divisão.

Como posso tornar a imagem sensível, mantendo a largura original?

Author: Tahmid Khan Nafee, 2015-12-15
Source

3 answers

Pode colocar a imagem num invólucro e dar ao invólucro a largura que deseja que a imagem tenha. HTML

<div class="imgwrapper">
   <img src="img.jpg" class="img-responsive">
</div>

CSS

.imgwrapper {
   width: 80%;
}

O acima deve, em teoria, fazer com que o imgwrapper 80% da largura do elemento-mãe, e a classe img-responsive-na imagem irá preencher todo o invólucro.

Se isto não responder à tua pergunta, podes explicar melhor o que queres dizer com isso? Uma vez que torná-lo sensível vai redimensionar a imagem, o que significa que não ter a largura original.
 20
Author: Rvervuurt, 2015-12-15 13:14:40

Você deve ter uma embalagem em torno da imagem que define o tamanho real do Pai que poderia ser usado para colocar essa imagem. Será relacionado com o div pai. Aplicar .img-sensível à imagem. Isto fará com que a imagem tenha a mesma largura que o invólucro.

HTML

<div class="wrapper">
   <img src="your-image.jpg" class="img-responsive" />
</div>

CSS

.wrapper {
   width: 50%;
}

Se quiser manter o tamanho original( será redimensionado para ter tamanho pequeno mas nunca mais elevado), deve também adicionar um max-width que terá de corresponde ao tamanho original da imagem. Isto irá sobrepor o valor original de 100% 

.wrapper img {
    max-width: 280px;
}
 3
Author: Henrique M., 2015-12-15 13:25:34

A classe .img-responsive aplica-se max-width: 100%; e height: auto; à imagem, por isso, se quiser manter a sua largura original explicitamente, terá de definir a largura da imagem usando o atributo width da marca img.

 0
Author: Meenakshi, 2015-12-15 13:15:26