Layout responsivo mobile

[crishenrique86 0]

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 Magno 6]

Bom dia amigo,

 

já tentou usar o backgroud-size ?

 

background-size: 100% 100%; ou

background-size: 100%; ou

background-size: cover;

[crishenrique86 0]

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?

[Marlon Pacheco 132]

Buenas tchê.

 

Coloque no css o seguinte:

img {
  max-width: 100%;
}

E seja feliz.

;)

[crishenrique86 0]

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?

[Marlon Pacheco 132]

Qual a resolução da tela que você está testando?

Tem como simular no codepen.io ?

[crishenrique86 0]

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.

[Marlon Pacheco 132]

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" */  
} 

[crishenrique86 0]

So com o css desse jeito nao deu....com usar viewport?

[Marlon Pacheco 132]

No head do documento coloque

<meta name="viewport" content="width=device-width, initial-scale=1.0">

[Maykel-ctba 233]

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.)

[crishenrique86 0]

Marlon,

 

certinho meu caro... vlw mesmo.!

Resolvido!