Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Peglow

Layout tela celular (todos tamanhos)

Por , em Desenvolvimento frontend

Recommended Posts

Peglow    0

Peglow
Postado

Boia tarde a todos

estou tentando fazer um layout para celular, mas estou com problemas, queria colocar 5 imagens e que essas 5 imagens ocupassem toda a altura do telefone sempre, independente do tamanho do mesmo.

Abaixo imagem de como estou tentando fazer
5 5 imagens uma abaixo da outra,feito para rodar em celular mesmo, mas tem que ocupar todo ele, sem ir para baixo ou para os lados, todas as imagens tem um tamanho bom que se adaptaria ate um tablet.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Peglow    0

Peglow
Postado

nada se ajustou a tela.

Link da tela que gerou: https://drive.google.com/open?id=0ByQefpMMTcv6WGRlOHROeHkwc3M

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contabilidade</title>






<style>
body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}




</style>


</head>


<body>


<img src="../_img/Menu.jpeg">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo de andrade baessa    16

leonardo de andrade baessa
Postado

nada se ajustou a tela.

Link da tela que gerou: https://drive.google.com/open?id=0ByQefpMMTcv6WGRlOHROeHkwc3M

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contabilidade</title>






<style>
body {
    background-image: url(img.jpg);
    background-position: center top;
    background-size: 100% auto;
}




</style>


</head>


<body>


<img src="../_img/Menu.jpeg">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">


</body>
</html>

Ai ja muda o exemplo ali era para Background 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contabilidade</title>






<style>
body img {
    width: 100%;
    height: 100%;
background-size: 100% 100%; 
}




</style>


</head>


<body>


<img src="../_img/Menu.jpeg">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

leonardo de andrade baessa    16

leonardo de andrade baessa
Postado

tenta com height: auto


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Contabilidade</title>






<style>
body img {
    width: 100%;
    height:auto; min-height:100%;
background-size: 100% 100%; 
}




</style>


</head>


<body>


<img src="../_img/Menu.jpeg">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">
<img src="../_img/bt1.png">


</body>
</html>

caso não obtenha o resultado tenta criar esses mesmos parâmentros dentro de uma div .

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito