Ir para conteúdo
BelleFisio

Imagens Responsivas aumentam mais que o tamanho máximo definido

Recommended Posts

Olá, bom dia!

 

As imagens do meu site ficam corretas, nas proporções definidas, quando testo localmente (inspecionado a página no navegador) , porém quando fiz um teste no servidor online e  verifiquei em outros monitores "reais"  as imagens ficam maiores que o tamanho máximo definido (e elas aumentam desproporcionalmente), em algumas resoluções.

 

Por exemplo: eu testei em  monitores 17 e 19 polegadas (ambos com a resolução padrão 1024 X 768 px, tbm testei outras resoluções nessa telas) e as imagens ficaram "esticadas" horizontalmente e achatadas verticalmente, mas nessa mesma resolução, no computador onde fiz essas páginas (com resolução padrão de 1366 X768 px tela de 15"), as imagens ficam corretas (simulando uma tela na  resolução de 1024X768px). Em telas menores que 15" esta tudo certo tbm.

 

Defini  um tamanho máximo para as imagens, porém quando em telas maiores elas aumentam muito e desproporcionalmente (mesmo com  resolução que já esta definida no css) :

 

img{
	width:100%;
	height:auto !important;
	max-width:400px;
	max-height:300px;
}

@media screen and (max-width: 1024px){
  
  .img_textos{
  width:100%;
  max-width:300px;
  }

 

Teria alguma forma, de quando  o site, chegar a resolução máxima definida (1366X768 px) as imagens e o site em geral não aumentar além do estabelecido para essa resolução (sendo esse o limite máximo)? 

 

Obrigada!

Compartilhar este post


Link para o post
Compartilhar em outros sites

BelleFisio fizemos vídeos sobre Design Web Responsivo, se quiser depois dá uma olhada:

Tente fazer o seguinte, no HTML coloque a largura e altura máxima que você deseja para a imagem:

<img src="imagem.png" width="1024" height="auto" />

E no CSS defina que a largura máxima será 100%

img {
	max-width: 100%;
	height: auto;
}

Nesse caso a largura máxima que a imagem terá é 1024px e se a tela for menor ela se ajustará a tela e se for maior não passará deste tamanho

  • Obrigado! 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
5 horas atrás, uninerds disse:

BelleFisio fizemos vídeos sobre Design Web Responsivo, se quiser depois dá uma olhada:

Tente fazer o seguinte, no HTML coloque a largura e altura máxima que você deseja para a imagem:


<img src="imagem.png" width="1024" height="auto" />

E no CSS defina que a largura máxima será 100%


img {
	max-width: 100%;
	height: auto;
}

Nesse caso a largura máxima que a imagem terá é 1024px e se a tela for menor ela se ajustará a tela e se for maior não passará deste tamanho

 

Obrigada! Vou ver a vídeo aula, e fazer a adaptação recomendada  no meu código. Quando concluir posto aqui. Agradeço a atenção

Compartilhar este post


Link para o post
Compartilhar em outros sites
Em 24/03/2018 at 11:48, uninerds disse:

BelleFisio fizemos vídeos sobre Design Web Responsivo, se quiser depois dá uma olhada:

Tente fazer o seguinte, no HTML coloque a largura e altura máxima que você deseja para a imagem:


<img src="imagem.png" width="1024" height="auto" />

E no CSS defina que a largura máxima será 100%


img {
	max-width: 100%;
	height: auto;
}

Nesse caso a largura máxima que a imagem terá é 1024px e se a tela for menor ela se ajustará a tela e se for maior não passará deste tamanho

 

Obrigada, resolveu o problema! 

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por fabioseco
      Ola pessoal, meu dw cs6 não tem as tags de css flexbox.
      Alguém sabe como adiciona-las no dw cs6???
    • Por Solo
      Boa noite  pessoal, estou com um problema, sou iniciante me php e estou em duvida com como posso fazer uma paginacao de produtos do banco de dados...... alguem poderia me ajudar ou me indicar um tutorial ???
       
      <?php
      error_reporting(0);
      ini_set(“display_errors”, 0 );
      require_once("conexao.php"); 
         $produtos = "SELECT produto_ID, nome_produto, imagem_produto, valor ";
          $produtos .= "FROM produto ";
          $resultado = mysqli_query($conecta, $produtos);
          if(!$resultado) {
              die("Falha na consulta ao banco");   
          }
      ?> 
       
       
       
      AONDE LISTA OS PRODUTOS 
       
       
       
          <div class="rowproducts">
          <div id="listagem_produtos2" class="">
            <?php while($linha=mysqli_fetch_assoc($resultado)) {   ?>
                       
                      <ul>
                          <div class="class22">
                          
                          <li>
                              
                              <img  class="img-responsive"  height="200" width="200" src="<?php echo $linha["imagem_produto"]?> "  >
                              </li>
                              
                              <li class="nproduto"><?php echo $linha["nome_produto"]?></li>
                               <li class="nproduto">R$ <?php echo $linha["valor"]?></li>
                          </div>
                          </ul>
                          
                          
                          
                          
                          
                          
                          
                      
                  <?php } ?>
                      
                      
                      
                    </div>
                    </div>
       
       
       
       
    • Por Kelly Ferracine
      Adcionei um relógio no site, mas quando atualizo a pagina ele some e logo aparece, isso ta causado problema, pois a div abaixo sobe fazendo ficando esquisito, alguém poderia me ajudar?? Agradeço a atenção
    • Por Alphb
      Oii, podem me ajudar
       
      Tipo com o <img>
      Eu adiciono a imagem tipo width:100%;
      Height:100%;
      Esses 100% não deveria ser 100% do width/height da imagem, mas ela ta ocupando os 100% da div até mesmo do body todo ._.
       
      Tipo eu quero deixar a imagem pequena mas proporcional 
      Pq não vai ser só uma imagem vai ser varias de tamanho diferente e ela ficam grande só com <img> sem CSS
      Já tentei Max-width/height, Min-width/height
      E não tou fazendo com PX pq se alguém acessar o site com um tablet o PX vai ser maior doq no smartphone._.
       
      E quando ta perfeito o height ta um pouquinho grande além do tamanho proporcional ao da width e fica aquela imagem meio esticada e fora de resolução
       
      Exemplo no facebook as imagens dos posts ficam proporcionais e quando não a imagem corta e se clicar na imagem fica tela cheia e a imagem fica perfeita sem perda
    • Por ghlevin
      Estou adaptando o site de um cliente de forma a torná-lo responsivo. Um fornecedor já me passou os arquivos referentes ao layout responsivo e estou tendo de adaptar ao meu site. Contudo, algumas páginas do meu site dão problema. Em uma delas, eu uso muito a função feita em javascript dialog. Acredito que seja algum conflito nos meus arquivos JS dentro do head.php
       
      head.php original:
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <script type="text/javascript"> jQuery.browser = {}; // Script incluído em 21/12/2018 (function () { jQuery.browser.msie = false; jQuery.browser.version = 0; if (navigator.userAgent.match(/MSIE ([0-9]+)\./)) { jQuery.browser.msie = true; jQuery.browser.version = RegExp.$1; } })(); </script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> head.php adaptado, onde fiz a inclusão de novos scripts e novos stylesheets (links):
      <?php if ($dados['pagina']['header'] == true) { ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <meta http-equiv="cache-control" content="max-age=0" /> <meta http-equiv="cache-control" content="no-cache" /> <meta http-equiv="expires" content="0" /> <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" /> <meta http-equiv="pragma" content="no-cache" /> <html class="wide wow-animation smoothscroll scrollTo" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="shortcut icon" href="<?php echo $dados['pagina']['raiz']?>images/layout/favicon2.ico"> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <meta name="keywords" content="SANA design multipurpose template"> <meta name="date" content="Dec 26"> <link rel="icon" href="http://www.investidorintercity.com.br/images/layout/favicon2.ico" type="image/x-icon"> <!-- Stylesheets--> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Oswald%7CLato:400italic,400,700"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" /> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <title>Portal do Investidor Intercity</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-1.8.0.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery-ui-1.8.23.custom.min.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.validate.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.spin.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/flashcanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flashcanvas/canvas2png.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.multiselect.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/functions.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/principal.js"></script> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.css?v=2.0.6" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>js/ui-lightness/jquery-ui-1.8.23.custom.css" type="text/css" media="screen"/> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']?>css/jquery.multiselect.css" type="text/css" media="screen"/> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/fancybox/jquery.fancybox.pack.js?v=2.0.6"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.plugin.html2canvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.cookie.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/jquery.flot.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/flot/excanvas.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.dataTables.js"></script> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']?>js/jquery.twosidedmultiselect.js"></script> <?php if (count(Loader::retornaJs()) > 0) { foreach(Loader::retornaJs() as $js) { ?> <script type="text/javascript" src="<?php echo $dados['pagina']['raiz']; ?>js/<?php echo $js; ?>.js"></script> <?php } } ?> <script type="text/javascript"> <?php if (count(Loader::retornaJsDados()) > 0) { foreach(Loader::retornaJsDados() as $jslib) { ?> <?php echo $jslib; ?> <?php } } ?> </script> <?php if (count(Loader::retornaCss()) > 0) { foreach(Loader::retornaCss() as $css) { ?> <link rel="stylesheet" href="<?php echo $dados['pagina']['raiz']; ?>css/<?php echo $css; ?>.css" type="text/css" /> <?php } } ?> <style type="text/css"> <?php if (count(Loader::retornaCssDados()) > 0) { foreach(Loader::retornaCssDados() as $csslib) { ?> <?php echo $csslib; ?> <?php } } ?> </style> </head> <?php }?> Pelo console no Chrome, ele me avisa o seguinte:
      Uncaught TypeError: $(...).dialog is not a function O que eu poderia fazer pra não ter conflitos como esse? Já tentei a função noConflict(), mas não sei se fiz ela corretamente. Quem pode me ajudar?
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.