Jump to content
alexdcarvalho

Como colocar uma imagem sem alterar a qualidade dela?

Recommended Posts

 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 {
    width100%;
    height300px;
    background-sizecover;
    background-positioncenter right;
}

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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 {
    width100%;
    height300px;
    background-sizecover;
    background-positioncenter 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...

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By frdca10
      Estou personalizando a página "minha conta" do woocomerce com o elementor.
      Nesta pagina coloquei alguns icones que funcionam como botões que direcionam o usuário para as paginas especificas (editar enrereço, editar conta, logout, dashboard).
       
      ja está funcionando e ao clicar em cada icone, a pagina é direcionada e o endereço do navegador muda e fica assim dependendo da situação:
       
      https://meusite/minha-conta/edit-account/
      https://meusite/minha-conta/orders/
      https://meusite/minha-conta/edit-address/
       
      Como eu posso fazer para que cada icone assuma uma cor especifica dependendo do endereço que foi acessado?
       
      Hoje todos os icones ficam da mesma cor. Gostaria de uma indicação visual de qual pagina esta sendo acessada
    • By Felper
      Criei um sistema de login com php e mysql mas não consigo realizar o login mesmo tendo certeza de que os dados foram cadastrados com sucesso. Não sei o que fiz de errado. Vejam o código:
      <?php $login2 = $_POST['loginlogar']; $senha2 = $_POST['senhalogar']; $link = mysqli_connect("localhost", "root", "", "bancolanche") or die("<h1>Não foi possível conectar!!</h1>". mysqli_error()); $banco = mysqli_select_db($link, "bancolanche") or die("<h1>Não foi possível abrir banco de dados!!</h1>". mysqli_error()); $sql = "SELECT login, senha FROM users"; $resulta = mysqli_query($link, $sql); while ($book = $resulta->fetch_object()) { $logindb = $book->login; $senhadb = $book->senha; } if($login2 == "" || $senha2 == ""){ $_SESSION['msg'] = "<h1 style='color:red'>Erro ao logar! Há campos de preenchimento obrigatório em branco.</h1>"; header("Location: logar.php"); } else { if($logindb==$login2 && $senhadb==$senha2){ $_SESSION['msg'] = "<h1 style='color:green'>Logoff realizado com sucesso!</h1>"; header("Location: index.html"); } else { $_SESSION['msg'] = "<h1 style='color:red'>Erro ao logar! Usuário inexistente ou senha incorreta.</h1>"; header("Location: logar.php"); } } mysqli_close($link); ?>  
    • By stefanyprs
      //modelo.html <!DOCTYPE html> <html lang="pt-br"> <head>     <meta charset="UTF-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Hora do dia</title>     <link rel="stylesheet" href="estilo.css"> </head> <body onload="carregar()">     <header>         <h1> Hora do dia </h1>         </h1>     </header>     <section>         <div id="msg">             msg         </div>         <div id="foto">             <img class="imagem" src="fotomanha.jpg" alt="foto do dia">         </div>     </section>     <footer>         <p>&copy; Rodapé </p>     </footer>     <script src="script.js"></script> </body> </html>   //script.js function carregar () {     var msg = window.document.getElementById('msg')     var img  = window.document.getElementsByClassName('imagem')      var data = new Date()     var hora = data.getHours()          msg.innerHTML = 'Agora são ' + hora + ' horas'          if (hora >= 0 && hora < 12){         //Bom dia         img.src = 'fotomanha.jpg'         } else if (hora >= 12 && hora < 18){         //Boa tarde         img.src = 'fototarde.jpg'      } else {         //Boa noite         img.src = 'fotonoite.jpg'     } }   //estilo.css body{     background-color: aqua;     font: normal 15pt Arial; } header{     color:rgb(255, 255, 255);     text-align: center; } section{     background: white;     border-radius: 10px;     padding: 15px;     width: 500px;     margin:auto;     box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.329);      } footer{     color:white;     text-align: center;     font-style: italic;   } div{     text-align: center; } .imagem{     width: 500px;    /* largura da imagem */     height: 350px;   /*  altura da imagem  */     margin-top: 10px; /* margem do topo */ }
    • By Felper
      Estou criando um jogo de avançar casas e não estou conseguindo somar os valores sorteados pelo dado. Quero fazer assim:
      let somadado=0;
      let valorsorteado=5;
      somadado=5;
      valorsorteado=3;
      somadado=8;
      valorsorteado=2;
      somadado=10;
       
      Assim por diante. 
       
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.