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 rafa-martin
      Pessoal, boa tarde. Estou fazendo uma barra de alerta de cookies. Não estou conseguindo colocar o botão de fechar no canto superior direito. Alguém, pode me dar uma luz? Segue código.
       
      <script>
      function cookies(functions) {
        const container = document.querySelector('.cookies-container');
        const save = document.querySelector('.cookies-save');
        if (!container || !save) return null;
        const localPref = JSON.parse(window.localStorage.getItem('cookies-pref'));
        if (localPref) activateFunctions(localPref);
        function getFormPref() {
          return [...document.querySelectorAll('[data-function]')]
            .filter((el) => el.checked)
            .map((el) => el.getAttribute('data-function'));
        }
        function activateFunctions(pref) {
          pref.forEach((f) => functions[f]());
          container.style.display = 'none';
          window.localStorage.setItem('cookies-pref', JSON.stringify(pref));
        }
        function handleSave() {
          const pref = getFormPref();
          activateFunctions(pref);
        }
        save.addEventListener('click', handleSave);
      }
      function marketing() {
        console.log('Função de marketing');
      }
      function analytics() {
        console.log('Função de analytics');
      }
      cookies({
        marketing,
        analytics,
      });
      </script>
      <style>
      p {
        margin: 0px;
      }
      body {
        margin: 0px;
        height: 200vh;
        background: #eee;
      }
      .cookies-container {
        color: #222;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        position: fixed;
        width: 100%;
        bottom: 2rem;
        z-index: 1000;
      }
      .cookies-content {
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
        background: white;
        max-width: 720px;
        border-radius: 5px;
        padding: 1rem;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.5rem;
        opacity: 0;
        transform: translateY(1rem);
        animation: slideUp 0.5s forwards;
      }
      @keyframes slideUp {
        to {
          transform: initial;
          opacity: initial;
        }
      }
      .cookies-pref label {
        margin-right: 1rem;
        margin-top: -10px;
      }
      .cookies-save {
        grid-column: 2;
        grid-row: 1/3;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
          Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        background: #007cf8;
        color: white;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        padding: 0.8rem 1rem;
        font-size: 1rem;
      }
      @media (max-width: 500px) {
        .cookies-content {
          grid-template-columns: 1fr;
        }
        .cookies-save {
          grid-column: 1;
          grid-row: 3;
        }
      }
      </style>
      <!DOCTYPE html>
      <html lang="pt-BR">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Cookies</title>
      </head>
      <body>
          
          <!--
        <div class="cookies-container">
          <div class="cookies-content">
                  <p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> <a href="<?php echo asset('..\cookies')?>" target="_blank"><font color="blue"><b>Termos LGPD</b></font></a></p><br>
                <p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
            <div class="cookies-pref">
            </div>
            <button class="cookies-save">Salvar e Continuar</button>
          </div>
        </div>
        -->
        
          <div class="cookies-container">
              
            <div class="cookies-content">
                
                      
                    
                <p><font color="black">Nosso site usa cookies para melhorar sua experiência na navegação.</font> </p><br>
                <p><font color="black">Baseia-se na orientação do Webec objetivando a Proteção de seus Dados. Lei 13.709/2018 - Lei Geral de Proteção de Dados.</font></p>
                <div class="cookies-pref">
               
                  <button class="cookies-save">OK.Entendi.</button>
                  <span><a href="">x</a></span>
                </div>
              
                
                
            <!-- <button class="cookies-save">OK.Entendi.</button>-->
          </div>  
        
      </body>
      </html>
    • By carlosmassam
      Bom dia a todos. Eu tenho o seguinte código em HTML
      <input type="checkbox" id="checkmarcacao1" name="checkmarcacao1" value="checkmarcacao1"> <input type="time" id="hora101" name="hora101" disabled="disabled"> E tenho o seguinte código em Javascript
      <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script> $(document).ready(function () { $('input[name=checkmarcacao1]').change(function() { if ($(this).is(':checked')) { $('input[name=hora101]').removeAttr('disabled'); } else { $('input[name=hora101]').attr('disabled',true); } }); }); </script> Esse meu código em Javascript faz o seguinte: Quando meu Checkbox está marcado, ele habilita o input time. Se eu desmarcar o checkbox, o input time é desabilitado.
      Acontece que se eu marcar o checkbox, escrever no input time, por exemplo: 12:34, depois desmarcar o checkbox o  input time fica desabilitado porém o valor 12:34 ainda fica escrito nele.
      Eu gostaria de saber como apagar o valor do input time quando o checkbox estiver desmarcado. 
       
      Quem quiser testar o código segue o link: https://jsfiddle.net/o8f3zvqu/
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
    • By Kaio Kdesigner
      Oi pessoal, estou tentando alinhar o titulo no meu vertical da div, já vi varios tutoriais sobre "vertical-align e  display: table-cell" mas nada funciona, alguém poderia me ajudar??
       
       
      Como esta:
      https://ibb.co/6grR6zP
       
      Meu CSS:
       
      .category-noticias {width:100%;background-color:#ffffff;border: 1px solid #bd67bd;} .category-noticias .thumb{float: left;width:130px; height:120px; object-fit: cover; background-color:#ffffff; padding:0px;} .category-noticias .titulo {margin-left: 158px; line-height:15pt; font-size:13pt; text-transform:uppercase; word-wrap: break-word;} .category-noticias .titulo a {font-family: lato, sans-serif;color:#64578c;text-decoration:none;}  
×

Important Information

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