Como colocar uma imagem sem alterar a qualidade dela?

Você pode usar max-height no lugar de height assim determina um máximo apenas da imagem e ela não ficará esticada.

>

3 minutos atrás, Aphrodi disse:

Você pode usar max-height no lugar de height assim determina um máximo apenas da imagem e ela não ficará esticada.

Fiz isso agora, porém a imagem só fica boa quando a página é minimizada; expandida, ela fica com o mesmíssimo problema.

>

8 horas atrás, alexdcarvalho disse:

Como colocar uma imagem no html/css sem que a qualidade dela não decaia? Eu fiz os procedimentos abaixo, achando que a coisa pudesse melhorar, porém a imagem horizontalmente fica esticada, toda a resolução se perde. O que eu quero é justamente fazer com que o width fique completo e o height no 300px, porém com uma qualidade boa.

A resolução original da imagem é de 1920x1279.

 .img {

     width: 100%;

     height: 300px;

     background-size: cover;

     background-position: center right;

 }

	 

	Ola tudo bem não sei se já conseguiu resolver o problema mais tenta desta forma..

	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....

.img.qualidade {

object-fit: cover;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center right;
}

/Ou assim/

img.qualidade{

object-fit: cover;
width:100%;
height:300px;
}

<div>
 128x128
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 500x500
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 600x600
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 800x800
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 Original
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>

	 

	 

	Se por acaso não for o que tu queria

	recomendo dar uma olhada [aqui...](https://www.sitepoint.com/crop-and-resize-images-with-imagemagick/)

	 

	Espero ter ajudado de alguma forma...

>

5 horas atrás, Jack Oliveira disse:

Ola tudo bem não sei se já conseguiu resolver o problema mais tenta desta forma..

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....

.img.qualidade {

object-fit: cover;
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center right;
}

/Ou assim/

img.qualidade{

object-fit: cover;
width:100%;
height:300px;
}

<div>
 128x128
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 500x500
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 600x600
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 800x800
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>
<div>
 Original
 <img class="qualidade" src="imagem/nome-da-imagem.jpg" />
</div>

  

  

 Se por acaso não for o que tu queria

 recomendo dar uma olhada [aqui...](https://www.sitepoint.com/crop-and-resize-images-with-imagemagick/)

  

 Espero ter ajudado de alguma forma...

	Era exatamente isto o que eu estava querendo fazer. A imagem que eu tô utilizando é maior que o tamanho que eu tava tentando deixar. 

	 

	Eu continuei pesquisando em alguns cantos e vi que o melhor a ser feito, nesse caso, era redimensionar a imagem no photoshop, pra ela automaticamente já ter o tamanho desejado. Procede isso?