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 Luiz Fernando 111
      Caros amigos, estou tentando adicionar soma entre inputs do html e do javascript, mas com esse exemplo, apenas consegui colocar no input do html. Como faço para implementar no input do javascript e somar o valor junto com o Valor Total mostrar lucro quando foi debito e prejuizo quando for crédito ? Alguém poderia me dá help !!!
       
       

    • Por Robson Augusto
      Galera se alguém souber o que ocorre,  é o seguinte, não acredito que possa ser Problema de SEO, mas vamos lá meu site anuncicarbh.com, não aparece em pesquisa feitas pelo computador, com a palavra chave "seminovos bh", ele aparece na primeira oscilando para segunda pagina do bing e yahoo, fazendo a pesquisa pelo telefone, ja no pc ele nao aparace mais no yahoo, mas continua a aparecer no bing, ja no google ele teve pequenas aparições na terceira página, agora em ambas as pesquisas de pc e celular ja não aparece mais no google... So aparece atualmente no google, pesquisando pelo nome do site... Alguem saberia me dizer o por que disso? será SEO?
    • Por 4ly
      Olá. Bom basicamente eu tenho um botão âncora que leva até a aba de sobre do meu site, só que ele não tem animação, ele simplesmente "teleporta" para essa aba do nada isso não é legal. 
      Gostaria de saber algum código de JavaScript ou CSS para solucionar isso 
      Esse é o código : 
       
      <button id="explorer"><a href="#about">Explorar</a></button>
    • Por jgasper
      Boa tarde, preciso de ajuda, fiz o site para minha empresa de advocacia mas nao sei transformar em mobile, peguei template pronto e fiz modificações, nao sou bom em HTML, foi o que consegui fazer. Alguem pode me ajudar a transformar ele em responsivo? só fazendo o menu funcionar para celular?
       
      Os arquivos do site estao em: https://mega.nz/#!AEAUxa5Z!EwFVVhgaJeJg6DTFpzUfi0vnrULPzI8YI9I0-XJwaE8
       
      Agradeço desde ja.
    • Por mpcarvalho
      Estou com uma dúvida e revirei o forum e a internet e não achei solução.
       
      Criei um template em HTML para um APP hibrido, porem quando utilizado na versão mobile, ao clicar em qualquer link aparece uma marca de seleção antes de mudar de página. Gostaria de saber como remover isso. Segue imagens para explanar melhor minha dúvida.
       

×

Informação importante

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