Jump to content
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!

Share this post


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

Share this post


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

Share this post


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

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 tomas.david100
      Boa tarde tenho a seguinte dúvida será possível utilizar um css só para o menu lateral e outro css para o body? Vou deixar uma imagen a seguir para se perceber melhor.
       

    • By astolpho
      eu gostaria de saber como posso "desativar" ou "ativar" uma class a partir do php, clicando o botão. 
       
       
       
       
      <!DOCTYPE html>
      <html lang="pt-br">
      <head>
          <meta charset="utf-8">
          <meta name="vieport" content="width=device-widht, initial-scale=1.0">
          <meta http-equiv="X-UA-Comapatible" content="ie=edge">
          <title>Barra de Progesso Oficial</title>
          <style type="text/css">
              
              .container{
                  width: 100%;
              }
              .step-pog-bar{
                  margin-top: 20%;
                  counter-reset: step;
              }
              .step-pog-bar li{
                  list-style: none;
                  float: left;
                  width: 20%;
                  position: relative;
                  text-align: center;
              }
              .step-pog-bar li::before{
                  content: counter(step);
                  counter-increment: step;
                  width: 30px;
                  height: 30px;
                  line-height: 30px;
                  border: 2px solid #ddd;
                  display: block;
                  text-align: center;
                  margin: 0 auto 10px auto;
                  border-radius: 50%;
                  background-color: #fff;
              }
              .step-pog-bar li::after{
                  content: '';
                  position: absolute;
                  top: 15px;
                  left: -50%;
                  border: 2px solid #ddd;
                  width: 100%;
                  z-index: -1;
              }
              
              .step-pog-bar li:first-child::after{
                  content: none;
              }
              .step-pog-bar li.active{
                  color: chartreuse;
              }
              .step-pog-bar li.active::before{
                  border-color: chartreuse;
              }
              .step-pog-bar li.active + li::after{
                  border-color: chartreuse;
              }
              .btn{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 20%;
              }
              .btn_D{
                  margin-top: 100px;
                  position: absolute;
                  margin-left: 10%;
              }
       
          </style>
      </head>
      <body>
          <div class="btn">
              <input type="submit" value="ativar">
          </div>
          <div class="btn_D">
              <input type="submit" value="Desativar">
          </div>
          <div class="container">
              <ul class="step-pog-bar">
                  <li class="active">Canal Dentario</li>
                  <li class="active">Limpeza</li>
                  <li class="active">Clareamento</li>
                  <li class="active">Escovação</li>
                  <li>Conclusão</li>
              </ul>
          </div>
      </body>
      </html>
    • By devfelipemonteiro
      tegcommerce - plataforma de e-commerce open source
      https://tegcommerce.org
      https://github.com/tegcommerce
      https://t.me/tegcommerce
       
      objetivo
      do brasil para o mundo a maior plataforma de e-commerce open source
       
      skills necessários
      qualquer contribuição é bem vinda
       
      acesse nosso grupo do telegram: https://t.me/tegcommerce
       
      projetos similares
      wordpress e woocommerce
      drupal
      joomla
      magento

    • By rafalbino
      Fala pessoal! Tô com uma dúvida na versão mobile do meu menu.
      A versão desktop já está tudo ok, porém, quando acesso pelo mobile, ele aparece apenas um dos campos do menu e não ele totalmente.
       
      Segue o código:

      .menu{width: 100%;height: 50px;background-color: #fff; margin-top: -65px; }
      .menu ul{list-style: none;position: relative;float: right;}
      .menu ul li {width: 200px;float: left;}
      #menu2 {width: 130px;float: left;}
      #menu3 {width: 160px;float: left;}
      .menu ul li:last-child {width: 200px;float: left;}
      .menu i {vertical-align: middle; margin-right: 2px; margin-top: -4px;}
      .menu a{padding: 15px;display: block;text-decoration: none;text-align: center;background-color: #fff;color: #151e51; vertical-align: middle;  font-size: 16px;}
      .menu ul ul{position: absolute; margin-left: 50px; visibility: hidden; } /*Atacando a ul do submenu, escondendo os campos */
      .menu ul li:hover ul{visibility: visible;  }/*Atacando a ul do submenu, passando pela li interna, mostrando os campos ocultos*/
      .menu a:hover{background-color: #fff; font-weight: 500;}/*Alterando a cor da fonte quando o mouse passa por cima*/
      #primeiro{ border-radius: 7px 7px 0px 0px;}
      #ultimo{ border-radius: 0px 0px 7px 7px;}
      .menu ul ul li{float: none;width: 200px;  }/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li:last-child {float: none; width: 200px;}/*Deixando as linhas do submenu na vertical*/
      .menu ul ul li a {background-color: #f1f1f1;border-radius: 0; text-align: left; margin-bottom: -20px; color: black;} /*Alterando a cor de fundo do submenu*/
      .menu ul ul li a:hover {background-color: #f1f1f1;color: black; } /*Alterando a cor de fundo do submenu*/
      .borda {border-radius: 0;}
      label[for="bt_menu"]{padding: 5px;background-color: #222;color: #fff;font-family: 'Arial';text-align: center;font-size: 30px;cursor: pointer;width: 50px;height: 50px; margin-top: -75px;}
      #bt_menu{display: none;}
      label[for="bt_menu"]{display: none;}
       
      Agora o código da versão mobile
       
      label[for="bt_menu"]{display: block;float: right; margin-top: -70px; background: #f35270;}
          #bt_menu:checked ~ .menu{margin-left: 0;}
          .menu{margin-top: 255px;margin-left: -110%;transition: all .9s;width: 100%; }
          .menu ul{float: none;}
          .menu ul li{width: 100%;float: none;}
          .menu ul li:last-child {width: 100%;float: none; margin-top: 55px;}    
          .menu ul ul{ /*Escondendo os subitens no modo mobile*/
              position: static;overflow: hidden;max-height: 0;transition: all .9s;}
          .menu ul li:hover ul{ /*mostrando os subitens no modo mobile*/
              height: auto;max-height: 900px;}
          .menu ul ul li{width: 100%}
          .menu ul ul li:last-child {width: 100%;}
       
       
    • By laedsonfln
      Pessoal, boa noite!
       
       
      Gostaria de mostrar 3 colunas e 6 produtos no celular utilizando o shortcode do woocommerce na página principal. 
      Criei um site de Brechó pra minha namorada usando o Wordpress + woocommerce. Tentei usar os shortcodes do woocommerce para chamar os produtos pra página principal. Até aqui tudo bem, porém quando acesso o site pelo celular a loja mostra duas colunas mesmo eu utilizando [products limit="6" columns="3"]. Procurei bastante nas internet e o que eu consegui foi copiar o HTML usando o inspector do google e inserindo num bloco do Elementor (construtor de página que uso) e mudando algumas coisinhas no código. A primeira vista está funcionando mas quando acrescento um produto ele não atualiza no celular porque não é um shortcode.  Alguém pode me ajudar? Sou iniciante na programação. Segue o site: www.brechodaelyevariedades.com.br 
       
      Obrigado! 
×

Important Information

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