crishenrique86 0 Denunciar post Postado Agosto 25, 2014 Boa noite a todos! Estou tentando criar um simples HTML/CSS onde haverá apenas uma imagem, mas a mesma deverá se ajustar ocupando 100% de width, seja qual for o tamanho do smartphone ou tablet (Será voltando apenas para mobile). Minha imagem possui 650 x 827, quando faço os testes a imagem fica colada no quanto esquerdo, sobrando espaços no lado direito e abaixo (Sobra na parte debaixo eu acredito que seja normal, pois depende muito da largura parase redimensionar). Alguem poderia me ajudar? Compartilhar este post Link para o post Compartilhar em outros sites
Luiz Magno 6 Denunciar post Postado Agosto 25, 2014 Bom dia amigo, já tentou usar o backgroud-size ? background-size: 100% 100%; ou background-size: 100%; ou background-size: cover; Compartilhar este post Link para o post Compartilhar em outros sites
crishenrique86 0 Denunciar post Postado Agosto 25, 2014 Luiz, bom dia! Na verdade, o que eu fiz foi criar uma div "Tudo" e dentro dela eu coloquei o img src="" ....... Como ficaria desta forma que você passou? Compartilhar este post Link para o post Compartilhar em outros sites
Marlon Pacheco 132 Denunciar post Postado Agosto 25, 2014 Buenas tchê. Coloque no css o seguinte: img { max-width: 100%; } E seja feliz. ;) Compartilhar este post Link para o post Compartilhar em outros sites
crishenrique86 0 Denunciar post Postado Agosto 25, 2014 Marlon, Agradeço pela ajuda, mas a imagem não redimensiona de forma alguma cara. Fiz o que você disse mas nem alterar no celular, a imagem fica colada no topo e na esquerda da tela, com sobra no lado direito. O que fazer? Compartilhar este post Link para o post Compartilhar em outros sites
Marlon Pacheco 132 Denunciar post Postado Agosto 25, 2014 Qual a resolução da tela que você está testando? Tem como simular no codepen.io ? Compartilhar este post Link para o post Compartilhar em outros sites
crishenrique86 0 Denunciar post Postado Agosto 25, 2014 Essa pagina só será acessada apenas em dispositivos mobile (Smartphone ou tablet), e eu queria que esta imagem ajustasse no dispositivo. Minha imagems possui 650 x 827, seria apenas ajustar no horizontal, nem tem probelma se sobrar espaço em baixo. #content { max-width:650px; width: 100%; height: auto; } #content .img { width: 100%; max-height: 827px; /* Máximo da altura da imagem */ min-height: auto; /* Mínimo da altura, por padrão "auto" */ } Estou usando este css acima. no computador ele ajusta tranquilo, tenho uma extensão no chrome que ele emula varios tipos de dospositivos e da tudo certo, mas no celular mesmo, no teste pra valer, nao da! A imagem fica bem menor na tela e nao ajuta. Compartilhar este post Link para o post Compartilhar em outros sites
Marlon Pacheco 132 Denunciar post Postado Agosto 25, 2014 Você colocou a metatag viewport?? Já tentou colocar assim: #content { max-width:650px; width: 100%; height: auto; } #content .img { max-width: 100%; max-height: 827px; /* Máximo da altura da imagem */ min-height: auto; /* Mínimo da altura, por padrão "auto" */ } Compartilhar este post Link para o post Compartilhar em outros sites
crishenrique86 0 Denunciar post Postado Agosto 25, 2014 So com o css desse jeito nao deu....com usar viewport? Compartilhar este post Link para o post Compartilhar em outros sites
Marlon Pacheco 132 Denunciar post Postado Agosto 25, 2014 No head do documento coloque <meta name="viewport" content="width=device-width, initial-scale=1.0"> Compartilhar este post Link para o post Compartilhar em outros sites
Maykel-ctba 233 Denunciar post Postado Agosto 25, 2014 Coloque uma classe na sua imagem chamada "img-responsive". No seu CSS: .img-responsive { display: block; max-width: 100%; height: auto; } Lembrando que a tag na imagem não pode ter nenhuma indicação de medida (sem atributo width/height na tag imagem, no caso.) Compartilhar este post Link para o post Compartilhar em outros sites
crishenrique86 0 Denunciar post Postado Agosto 25, 2014 Marlon, certinho meu caro... vlw mesmo.! Resolvido! Compartilhar este post Link para o post Compartilhar em outros sites