Eu tenho uma imagem de 400px por 400px, e quero exibi-la como se tivesse 200px X 200px.
Qual a maneira ideal para fazer isso usando Bootstrap?
O Twitter Bootstrap não tem uma classe específica para isso.
Você pode usar o esquema de grid do Bootstrap para deixar a apresentação de imagens reponsiva dentro de um contexto de página adequado usando o exemplo de marcações abaixo:
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img data-src="holder.js/100%x180" alt="...">
</a>
</div>
...
</div>
Neste exemplo uma imagem marcada como thumbnail está dentro de um bloco de 6 colunas para dispositivos pequenos e 3 para médios.Com esta marcaãço quando dimensionar no browser ou visualizar em diferentes telas a imagem será redimensionada de acordo com o layout.
Se ainda assim, todas as suas imagens tem 400x400 e você quer forçar específicamente 200x200 crie uma nova classe em um css específico de sua aplicação.
No arquivo CSS:
.img-200-200 {
width: 200px; // a altura se adequa proporcionalmente
}
E no html:
<img class="img-200-200" src="XXXX" />
Que tal utilizar o Canvas do HTML5 ?
<canvas id="exemploImgCanvas" width="250" height="250"/>
var canvas = document.getElementById('exemploImgCanvas');
var context = canvas.getContext('2d');
var testeImage = new Image();
testeImage.onload = function() {
context.drawImage(testeImage, 0, 0, 250, 250);
};
testeImage.src = 'http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png';
As images não são responsivas por padrão no Bootstrap e por isso você deverá especificar uma classe para todas as imagens que deseja tornar responsivas. Se trata da classe img-responsive
. Ao adicioná-la, suas imagens começarão a se adaptar conforme os dispositivos.
Seria: <img src="minha.png" class="img-responsive" alt="" title="" />
Depois coloque aqui suas experiências e o resultado adquirido com a inserção da classe e escolha a melhor resposta. Fonte: http://getbootstrap.com/css/#images-responsive
Abraços.