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 Artes Ussler
      Bom dia
       
      Alguns navegadores sublinham ou trocam a cor dos números de telefones que estão no site.
       
      Como faço para remover isso?
       
      Se alguém puder ajudar, eu fico grato.
    • Por MateusOFCZ
      Olá, gostaria de saber como eu faço para mostrar uma imagem diferente ao acessar o site...
      Eu precisaria mostrar a imagem linkada, ou seja, quando clickar na imagem ela levará você para um link, porém cada imagem tem um link diferente, como faço isso?
      Caso você não tenha entendido seria uma espécie de "anúncios" em meu site, toda vez que reentrar nele irá mostrar uma imagem diferente, e essa imagem será linkada, e os links também serão diferentes um do outro.
    • Por freitaz
      Bom eu criei um sistema de cadastro, estava tudo ok, no localhost, mas quando subi para o servidor, teve paginas que não carregou o html, 
      e ficou dessa forma

       
      Gostaria de ajuda, e desde já agradeço! 
    • Por David Cesar
      Não gosto dessa opacidade que meu menu ficou. Tentei isso: 

      Gostaria que a moderação excluísse o tópico, parece que era por causa da propriedade "z-index".

       
      header .head { background: #000000; height:95px; position:fixed; left:15px; width:100%; opacity:1; }  
    • Por LuizH.M
      Então gente eu to com um menu mas não consigo deixar ele responsivo, eu sei q existe varios outros menus responsivo na internet mas meu site ja ta pronto so falta a parte do menu conto com a ajuda de vcs
       
      HTML
      <!-- Barra de Menu -->
      <div class="container">
          <nav class="menu">
              <ul>
                  <li><a href="index.php">Home</a></li>
                  <li><a href="agenda.php">Agenda</a></li>
                  <li><a href="departamento.php">Departamento</a></li>
                  <li><a href="https://www.flickr.com/photos/142117425@N02/" target="blanck">Fotos</a></li>
                  <li><a href="#localizacao">Localização</a></li>
                  <li><a href="https://www.facebook.com/deives.duarte.9"  target="blanck" class="fa fa-facebook"></a></li>
                  <li><a href="#" target="blanck" class="fa fa-twitter"></a>
                  <li><a href="#" class="fa fa-youtube"></a>
              </ul>
          </nav>
      </div>
       
      CSS
      .container {
        position: absolute;
        margin: 20px;
        width: auto;
      }

      .menu{
      width:100%;
      height:54px;
      background-color: #333;
      font-family:'Arial';
      }
      .menu ul{
      list-style:none;
      position:relative;
      background-color: #333;
       /*css custom*/
        display: flex;
        flex-wrap: wrap;
        padding-left: 0px;
      }
      .menu ul li{
      width:50px auto;
      float:left;
      }
      .menu a{
      padding:15px;
      display:block;
      text-decoration:none;
      text-align:center;
      color:#fff;
      }
      .menu ul ul{
      position:absolute;
      visibility:hidden;
      }
      .menu ul li:hover ul{
      visibility:visible;
      }
      .menu a:hover{
      background-color:#f4f4f4;
      color:#555;
      }
      .menu ul ul li{
      float:none;
      border-bottom:1px solid #ccc;
      }
      .menu ul ul li a{
      background-color:#069;
      }
      @media screen and (max-width: 640px){
      .menu ul li{
              width: 100%;
              text-align:center;
          }
          .menu a{
              text-align:center;
          } 
      }
×

Informação importante

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