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 Air-Gear
      Olá, na parte de enviar eu conseguir, mas manter até terminar o cadastro eu não conseguir. Eu vou contar toda a história para ficar mais claro possível.
       
      Eu precisei implementar um Upload de qualquer imagem ou PDF na página de solicitar compras. O site utiliza AngularJS, a primeira versão do Angular. Eu tentei fazer sem depender de PHP, mas na internet achava só a parte de Front-End e ninguém sabia fazer no Back-End. Então eu resolvi fazer com PHP mesmo.
       
      Nó código PHP, ele aceita todos as extensões de imagens mais o PDF e é possível envia-los todos de uma vez na quantidade que quiser. Todos os arquivos serão renomeados, contendo no nome o ID do usuário logado pego pela função javascript, o dia do mês, o mês, o ano, o dia da semana, a hora, o minuto, o segundo, se é AM ou PM e uma numeração aleatório. O arquivo PDF vai continuar sendo PDF e todas as imagens serão JPG. No final, todos serão enviados para uma pasta chamada upload.
       
      Só que agora eu preciso jogar de volta para página para salvar os novos nomes dos arquivos para continuar o cadastro da solicitação de compras. Como AngularJS utiliza Javascript, eu tentei usa-lo dentro do PHP utilizando EOF, mas não tive resultado. Eu só consigo com HTML com as diretivas do AngularJS. Na parte do API, nos atributos, eu declarei "nomeArquivo: []," , para salvar os nomes dos arquivos.
       
      Seguem o código.
      <div class="row"> <div class="col-sm-12 col-md-6 "> <div class="upload_form_cont"> <form id="upload_form" enctype="multipart/form-data" method="post" action="/profile-upload"> <div> <div><label for="image_file">Selecione o arquivo de imagem</label></div> <div><input type="file" name="image_file" id="image_file" accept="image/*" onchange="fileSelected();" /></div> </div> <div> <input type="button" value="Upload" onclick="startUploading()" /> </div> <div id="fileinfo"> <div id="filename"></div> <div id="filesize"></div> <div id="filetype"></div> <div id="filedim"></div> </div> <div id="error">Você deve selecionar apenas arquivos de imagem válidos!</div> <div id="error2">Ocorreu um erro ao enviar o arquivo</div> <div id="abort">O upload foi cancelado pelo usuário ou o navegador interrompeu a conexão</div> <div id="warnsize">Seu arquivo é muito grande. Não podemos aceitar isso. Selecione arquivos pequenos</div> <div id="progress_info"> <div id="progress"></div> <div id="progress_percent">&nbsp;</div> <div class="clear_both"></div> <div> <div id="speed">&nbsp;</div> <div id="remaining">&nbsp;</div> <div id="b_transfered">&nbsp;</div> <div class="clear_both"></div> </div> <div id="upload_response"></div> </div> </form> </div> </div> </div> upload.php
      <?php function bytesToSize1024($bytes, $precision = 2) { $unit = array('B','KB','MB'); return @round($bytes / pow(1024, ($i = floor(log($bytes, 1024)))), $precision).' '.$unit[$i]; } //Pega o id do usuário logado $id_url = $_GET['id']; // Numero de campos de upload $numeroCampos = count($_FILES['image_file']['name']); // Tamanho máximo do arquivo (em bytes) $tamanhoMaximo = 1024*1024*2; // Extensões aceitas $extensoes = array(".jpg", "jpeg", ".gif", ".png", ".pdf", ".bmp", ".pdf", ".tiff"); //Local da pasta $_UP['pasta'] = '../upload/'; $substituir = false; for ($i = 0; $i < $numeroCampos; $i++) { // Informações do arquivo enviado $sFileName = $_FILES['image_file']['name'][$i]; $sSize = $_FILES['image_file']['size'][$i]; $sFileSize = bytesToSize1024($sSize, 1); $nomeTemporario = $_FILES['image_file']['tmp_name'][$i]; // Verifica se o arquivo foi colocado no campo if (!empty($sFileName)) { $erro = false; // Verifica se o tamanho do arquivo é maior que o permitido if ($sSize > $tamanhoMaximo) { $erro = "O arquivo " . $sFileName . " não deve ultrapassar " . $tamanhoMaximo. " bytes"; } // Verifica se a extensão está entre as aceitas elseif (!in_array(strrchr($sFileName, "."), $extensoes)) { $erro = "A extensão do arquivo <b>" . $sFileName . "</b> não é válida"; } // Verifica se o arquivo existe e se é para substituir elseif (file_exists($_UP['pasta'] . $sFileName) and !$substituir) { $erro = "O arquivo <b>" . $sFileName . "</b> já existe"; } else{ //Pega a extensão do arquivo $TipoExtensao = pathinfo($sFileName, PATHINFO_EXTENSION); // O arquivo passou em todas as verificações, hora de tentar movê-lo para a pasta // Primeiro verifica se deve trocar o nome do arquivo $unixTime = time(); $timeZone = new \DateTimeZone('America/Sao_Paulo'); $time = new \DateTime(); $time->setTimestamp($unixTime)->setTimezone($timeZone); $formattedTime = $time->format('d-m-Y_l_h-i-s-a'); $aleatorio = rand(); if($TipoExtensao == 'pdf'){ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.pdf'; }else{ $nome_final = $id_url .'_'. $formattedTime .'_'. $aleatorio .'.jpg'; } // Depois verifica se é possível mover o arquivo para a pasta escolhida if (move_uploaded_file($nomeTemporario, $_UP['pasta'] . $nome_final)) { // Upload efetuado com sucesso, exibe uma mensagem e um link para o arquivo echo "Upload do arquivo ".$sFileName." foi efetuado com sucesso!"; echo "</br>"; echo<<<EOF <p>Eu tentei implementar o retorno da página aqui!</p> <p></br></p> <p></br></p> EOF; } else { // Não foi possível fazer o upload, provavelmente a pasta está incorreta echo "Não foi possível enviar o arquivo, tente novamente"; echo "</br>"; } } } else { echo "Selecione algum arquivo de imagem ou PDF para fazero upload."; } } ?>  
    • By mateus.andriollo
      Estou preocupado com as opções dos navegadores que permitem, por exemplo, alterar para ativo um input que estava "disable" e alterar seu value de 10 para 500.
       
      Como bloquear este tipo de ação?
      Uso PHP como back-end e passo meus dados via dados via PDO.
       
      Existe uma maneira de criptografar ou mesmo criar uma regra que valide meus dados?
       
       
    • By Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Adriano Costa
      Fala pessoal tudo blz? Gostaria de fazer uma pergunta sobre logica de programação, eu criei um ToDo List  em Java Web, no meu projeto eu tenho uma tela de login que depois de logar o usuário acessa a lista de tarefa dele, a minha pergunta é, como eu poderia fazer para que cada usuário tenha acesso somente a sua lista de tarefas. Me da uma luz de que forma eu poderia fazer essa logica. Desde já agradeço. 
×

Important Information

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