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 juliosonic
      Boa noite..
      Estou desenvolvendo um site de Reiki https://reikicuritiba.com.br/ e estou com um duvida sobre o menu de navegação da versão mobile.
      O menu que tem o dropdown "Terapeutas" e "Terapias" quando clico em cima ele expande como deve ser, mas quando clico denovo para recolher os submenus
      nao acontece nada.. segue o trecho do codigo do menu..
      <div class="collapse navbar-collapse" id="navbarsExample09">             <ul class="navbar-nav ml-auto">               <li class="nav-item  active"><a class="nav-link" href="index.html">Home</a></li>               <li class="nav-item  active"><a class="nav-link" href="about-us.html">Quem Somos</a></li>               <li class="nav-item dropdown1">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapeutas</a>                     <ul class="dropdown-menu">                         <li><a class="dropdown-item" href="terapeuta-julio-cezar.html">Julio Cezar</a></li>                         <li><a class="dropdown-item" href="terapeuta-pamela-priscila.html">Pamela Priscila</a></li>                     </ul>                                    </li>               <li class="nav-item dropdown">                     <a class="nav-link dropdown-toggle" data-toggle="dropdown1" href="#">Terapias</a>                     <ul class="dropdown-menu" aria-labelledby="dropdown01">                         <li><a class="dropdown-item" href="o-que-e-reiki.html">O que é Reiki</a></li>                         <li><a class="dropdown-item" href="beneficios-reiki.html">Benefícios do Reiki</a></li>                         <li><a class="dropdown-item" href="principios-reiki.html">Princípios do Reiki</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Reiki em Animais</a></li>                         <li><a class="dropdown-item" href="animais-reiki.html">Estudos Sobre Reiki</a></li>                         <li><a class="dropdown-item" href="terapia-massagem-tantrica.html">Terapia Tântrica</a></li>                     </ul>               </li>               <li class="nav-item  active"><a class="nav-link" href="blog.html">Blog</a></li>                <li class="nav-item"><a class="nav-link" href="contato.html">Contato</a></li>             </ul>         </div>
      https://cristaispuroencanto.com.br/
      https://www.mandalatantra.com.br/
              
      Obrigado
      Att
      Julio Cezar
       
       
       
    • By opl12
      Olá Mestres
      Podem dar uma direção?
      Estou apanhando em algo que aparentemente é fácil
      Preciso: 
                  *Tenho um Banco de Dados com as Colunas: Id, nome, password, data, nivel             ... na coluna "nivel" tem duas informações ou é "staff" ou é "operacao"               *no 1º Select ele vai validar se o usuário e a senha estão corretos conforme no Banco de Dados do PhpMyAdmin             pelas variáveis $nome e $password               *no 2º Select ele valida o nível de acesso, se é "staff" ou "operacao"             se o $nome pertencer a um "staff".. então abre o "Site A"... se pertencer a um "operacao" vai para o "Site B"  
      <!DOCTYPE html> <html lang="pt-br"> <head> <title>Comprovar Usuário</title> <meta charset="utf-8"> </head> <body> <?php try { $base=new PDO("mysql:host=localhost;dbname=painel","root",""); $base->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // ....... select para validar login e senha se estão ok $sql="SELECT * FROM login WHERE nome= :nome AND password= :password"; $resultado=$base->prepare($sql); $nome=($_POST["nome"]); $password=($_POST["password"]); $resultado->bindValue(":nome",$nome); $resultado->bindValue(":password",$password); $resultado->execute(); $numero_registro=$resultado->rowCount(); //Validar Camada de Nível $sql2="SELECT * FROM login WHERE name= :nome AND nivel = 'staff'"; $resultado2=$base2->prepare($sql2); $nome=($_POST["nome"]); $resultado2->bindValue(":nome",$nome); $resultado2->execute(); $numero_registro2=$resultado2->rowCount(); if($numero_registro!=0) { //echo "<h1>Logado com Sucesso</h1>"; ...Se Login e Senha estão ok, então abre a página session_start(); $_SESSION["usuario"] = $_POST["nome"]; header("Location:reports.php"); }else { echo "Senha incorreta, favor verificar! <br><br>"; echo '<a href="index.php">Clique aqui para tentar novamente!</a>'; //header("Location:index.php"); } }catch(Exception $e) { die("Error" . $e->getMessage()); } ?> </body> </html>  
    • By opl12
      Olá Mestres,
      Não achei um tópico com este assunto
       
      No Código abaixo, eu dou um echo e me retorna o valor de um array,
      *que é o resultado de um SELECT feito no Banco de Dados PhpMyAdmin
      *no banco tenho a tabela LOGIN, com as colunas: Nome, Password, Nivel
       
      no PHP eu carrego as variáveis $nome e $password
      com isso eu faço um select com uma condição na coluna "nivel" .. para me trazer apenas o resultado onde consta a palavra "staff" na coluna "nivel"
       
      ao dar um echo:
      echo $key.": ".$value."<br>";  
      o PHP me retorna:
      nome: jeferson
      password: 123
      nivel: staff
       
      ***a pergunta:
      Tem como eu gravar o resultado da coluna "nivel" ( que neste caso é "staff" ) em uma variável?? ao ponto de dar um echo e aparecer apenas a palavra "staff" ?
       
      Se puderem me ajudar, já agradeço
       
      <!DOCTYPE html> <html lang="pt-br"> <head> <title>Comprovar Usuário</title> <meta charset="utf-8"> </head> <body> <?php $nome = "jeferson"; $password = "123"; try { $base=new PDO("mysql:host=localhost;dbname=painel","root",""); $base->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); $sql="SELECT nome, password, nivel FROM login WHERE nome= :nome AND password= :password"; $resultado=$base->prepare($sql); $resultado->bindValue(":nome",$nome); $resultado->bindValue(":password",$password); $resultado->execute(); $result = $resultado->fetch(PDO::FETCH_ASSOC); foreach ($result as $key => $value) { echo $key.": ".$value."<br>"; } }catch(Exception $e) { die("Error" . $e->getMessage()); } ?> </body> </html>  
       
       
       
    • By opl12
      Estou usando um servidor local do Xampp
      Onde tenho um Formulário em HTML para abrir um arquivo especifico que está no HD, no caminho: C:\arquivos\Planilha01.xlsx
      Porém não consigo fazer o HTML abrir ou que seja fazer o Download deste arquivo.
      Se eu colocar este arquivo na pasta onde está instalado o Xampp ele faz o download normal...

      Já tiveram este problema?
       
      Segue código:
       
       
      <html> <head> <title> ...Baixar Arquivo... </title> <bodY> <p> <a href="C:\arquivos\Planilha01.xlsx" >Clique Aqui para Baixar o Arquivo</a> </p> </bodY> </head> </html>  
×

Important Information

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