0

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 2

1

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.

1

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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .