Como faço para adaptar o meu site ao tamanho da ViewPort
?
Tenho uma imagem de boa resolução e gostaria que ela se adaptasse ao tamanho da tela, sem que ficasse a scrollBar.
2 Respostas
Para layouts responsivos é necessário utilizar a meta tag viewport, esse é um exemplo que eu costumo utilizar bastante em meus sites responsivos:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
Porém você tem que ver os parâmetros necessários para atender as necessidades do seu projeto. Leia este artigo para saber mais: https://developer.mozilla.org/pt-BR/docs/Mozilla/Mobile/Viewport_meta_tag
Sobre a imagem você pode colocar assim no seu arquivo CSS:
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
Se você postar o código como está fazendo, posso ajudar melhor a esclarecer suas duvidas.
Não consegui entender muito bem a sua dúvida, mas creio que seja deixar a imagem adaptada ao tamanho exato da tela.
.minha-imagem {
max-width: 100%;
width: 100%;
height: auto;
overflow: hidden; /* para não exibir scrollbar */
}
E se você quiser fixar um tamanho máximo para a imagem, basta inseri-la dentro de um container, como por exemplo:
<div style="max-width:500px;">
<img src="..." />
</div>