1

Estou estudando alguma coisa em jQuery para o caso. É possível mudar uma imagem conforme a resolução da tela?

Por exemplo: no próprio navegador, com ele sem minimizar é a imagem grande. Se minimizar, a função troca para a imagem pequena.

2 Respostas 2

2

Sim, é possível! Podes fazê-lo utilizando o método .width()

Descrição: O .width() obtem a largura atual calculada para o primeiro elemento no conjunto de elementos correspondentes apontados.

Neste caso o elemento correspondeste apontado será a window, para obtermos a largura da janela/viewport:

$(window).width()

Depois iremos calcular se a largura do viewport é ou não maior que um valor que queiramos determinar, por exemplo:

if ($(window).width() > 500) {
   alert('A largura da janela é menor que 500');
} else {
   alert('A largura da janela é maior que 500');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Aqui tens também um exemplo no jsFiddle para veres este código em acção. Arrasta as bordas da secção de resultados diminuindo ou aumentando o tamanho da janela para veres a imagem a mudar.

0

Você pode colocar uma chamada para a sua função dentro do $(window).resize(function() { ... });. Sugiro usar document.body.scrollWidth ao invés de $(window).width() pois o primeiro pega a largura de dentro da tela descontando a barra de rolagem, borda do browser, etc.

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 .