3

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?

3 Respostas 3

6

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" />
2

Que tal utilizar o Canvas do HTML5 ?

HTML

<canvas id="exemploImgCanvas" width="250" height="250"/>

JavaScript

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';
1

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.

2
  • Mas deste modo, como poderei ter controle quanto ao tamanho da exibição? Depende do div onde ela está ?
    – neoprofit
    Commented 8/08/2014 às 14:38
  • exatamente @neoprofit depende da largura horizontal das divs controladas pelas classes col-xs- / col-sm- / col-md- {1 , 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12} no seu layout responsivo. Commented 8/08/2014 às 14:45

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .