1

qual é o nome da tecnica utilizada para fazer um redimensionamento de img proporcional. por exemplo eu tenho uma imagem de 200x400 e quero mostrar ela em um quadrado 150x150 como faço para redimensionar essa imagem mantendo a proporção?

como gostaria que ficasse

inserir a descrição da imagem aqui

6
  • Responsivo?!?!?! 22/02/2018 às 20:55
  • sim, por exemplo ele vai redimensionar a img conforme o tamanho pedido 150x150 e o que sobrar desses 150x150 ela vai ficar com o fundo preto
    – srBubbles
    22/02/2018 às 20:57
  • Você pode verificar se ela é portrait ou landscape e assim escolher se vai redimensionar pela largura ou altura e centralizá-la. Se ela for mais vertical vai ficar com as tarjas nas laterais e se for mais horizontal elas vão ficar no topo e na base 22/02/2018 às 21:03
  • tem algum tutorial explicando certinho como fazer isso. nao tenho a menor ideia de como faço isso verificar se a img e mais vertical ou horizontal
    – srBubbles
    22/02/2018 às 21:07
  • vou editar a resposta com a foto de como gostaria que ficasse
    – srBubbles
    22/02/2018 às 21:15

1 Resposta 1

1

Você pode fazer isso apenas com CSS usando max-width e max-height. Para centralizar a imagem eu usei flex.

Veja dois exemplos com imagens em diferentes proporções:

.teste, .teste2{
   width: 150px;
   height: 150px;
   background: #ddd;
   display: flex;
   align-items: center;
   justify-content: center;
}

.teste img, .teste2 img{
   max-width: 100%;
   max-height: 100%;
}
Imagem de 200x400:
<br>
<div class="teste">
   <img src="http://www.narutopedia.ru/w/images/d/de/Unkai2Anime.jpg" />
</div>
<br>
Imagem de 630x354:
<br>
<div class="teste2">
   <img src="https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg" />
</div>

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 .