Como colocar uma imagem sem alterar a qualidade dela?

[alexdcarvalho 0]

 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;

}

[Aphrodi 10]

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

[alexdcarvalho 0]

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.

[Jack Oliveira 1]

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

 

Espero ter ajudado de alguma forma...

[alexdcarvalho 0]

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

 

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?