2

Quero criar tipo uma galeria de fotos, mas é o seguinte, dentro de uma <div> ficam várias fotos que, mesmo não sendo do mesmo tamanho, serão mostradas do mesmo tamanho (e um tamanho menor para que todas caibam na tela)!

Ao passar o mouse sobre as imagens, elas aumentariam para seu tamanho real. Tentei usar o seguinte código:

-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);

Mas o problema, é que com isso, a imagem fica "desfocada". Queria esse mesmo efeito (ou efeito parecido), mas sem perder a qualidade da imagem. Alguém sabe como faço isso?

2
  • Você recortou as imagens? ou apenas forçou elas a ficarem 1/3 do seu tamanho com CSS? Nunca utilizei transform: scale(), então não tenho certeza, mas se o comportamento dele é dar zoom no elemento da forma que ele é mostrado, você devera procurar uma forma alternativa de obter esse efeito.
    – mau humor
    Commented 20/01/2017 às 3:57
  • Uma ideia, por que vc não faz o contrário!? Deixa a imagem na galeria com transform: scale(0.7) e no :hover coloca transform: scale(1)
    – hugocsl
    Commented 7/12/2017 às 14:11

4 Respostas 4

1

Quando você tenta 'escalar' uma imagem para que pareça menor, os pixels são comprimidos e a imagem pode ficar até mais nítida que o normal, mas quando você usa para aumentar, ocorre o efeito de pixelização.

Para o efeito que você almeja, pode ter duas imagens de cada, no tamanho galeria (pequena) e no tamanho zoom. Então, usará o código para mostrar a imagem maior ao passar o mouse.

Outra alternativa é usar imagens maiores, e comprimi-las na galeria, realizando o oposto do que você fez.

0

Eu faria da seguinte forma, utilizaria a propriedade object-fit: cover nas imagens assim elas não iriam ficar desproporcional de acordo com o tamanho que você quer, porém se o tamanho que deseja for muito maior que o tamanho da foto não há o que faça sempre vai pixelizar, veja meu exemplo:

img.teste{
  object-fit: cover;  
  width: 256px;
  height: 200px;
}
<div> 
  128x128
  <img class="teste" src="http://www.sain.fazenda.gov.br/imagens/120430.gif/@@images/06a7b0b1-575b-46e5-8b22-3065cdd5095b.jpeg" />
</div>
<div>
  700x700
  <img class="teste" src="http://imguol.com/2013/01/23/23jan2013---a-nasa-agencia-espacial-norte-americana-divulgou-um-mosaico-de-imagens-do-sol-para-ilustrar-como-sao-feitas-as-observacoes-em-diferentes-comprimentos-de-onda-do-astro-nos-sempre-o-1358946571784_700x700.jpg" />  
 </div>

<div>
  oririnais <br>
  <img  src="http://www.sain.fazenda.gov.br/imagens/120430.gif/@@images/06a7b0b1-575b-46e5-8b22-3065cdd5095b.jpeg" />
  <img src="http://imguol.com/2013/01/23/23jan2013---a-nasa-agencia-espacial-norte-americana-divulgou-um-mosaico-de-imagens-do-sol-para-ilustrar-como-sao-feitas-as-observacoes-em-diferentes-comprimentos-de-onda-do-astro-nos-sempre-o-1358946571784_700x700.jpg" />
</div>

Repare que as imagens originais são de tamanhos diferentes e coloquei outras medidas no css.

Mas o ideal é sempre utilizar a imagem do tamanho que ela realmente é.

0

Eu entendi o que você precisa porquê estava com o mesmo problema. E encontrei na internet um código que faz não desfocar, não entendi muito bem... Vê se para você funciona também. Só acrescentar no mesmo CSS que você precisa dar o "zoom":

-webkit-transition:  all .01s cubic-bezier(.190, 1.000, .220, 1.000);
-moz-transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
-ms-transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
-o-transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
transition: all .01s cubic-bezier(.190, 1.000, .220, 1.000);
0

De fato a imagem não desfoca (ou "estoura", como costumamos dizer) quando você aumenta a escala dela até o tamanho real da mesma. Isso só ocorre quando a escala aplicada for maior do que as dimensões reais da imagem.

No exemplo abaixo eu aplico a mesma escala de 1.3 e a imagem não estoura, porque ela tem uma dimensão real de 220x220, e no código eu coloquei um height de 150 pixels, que ao passar o mouse sobre, vai para 195 pixels (1.3), abaixo dos 220 de altura reais:

img:hover{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" height="150" />

Agora, na mesma imagem, eu exibo ela no tamanho real (height de 220 pixels) e aplico a mesma escala de 1.3. Veja que ela "estoura" e perde a qualidade, porque estou aumentando as dimensões dela além dos valores reais:

img:hover{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    }
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Basketball.jpeg/220px-Basketball.jpeg" width="220" height="220" />

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 .