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?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.
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;
}
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.