Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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?
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?
Buenas tchê.
Coloque no css o seguinte:
img {
max-width: 100%;
}E seja feliz.
;)
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?
Qual a resolução da tela que você está testando?
Tem como simular no codepen.io?
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" */
}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.
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" */
}So com o css desse jeito nao deu....com usar viewport?
No head do documento coloque
<meta name="viewport" content="width=device-width, initial-scale=1.0">
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.)
Marlon,
certinho meu caro... vlw mesmo.!
Resolvido!
Bom dia amigo,
já tentou usar o backgroud-size ?
background-size: 100% 100%; ou
background-size: 100%; ou
background-size: cover;