Como ajustar tamanho de banners em JavaScript

Muitos sites utilizam banners para exibir promoções, anúncios ou destaques. Porém, em um ambiente responsivo, o tamanho dos banners deve se ajustar automaticamente à tela do usuário. Com JavaScript, é possível manipular as dimensões dos banners de forma dinâmica. Aqui vamos explorar como ajustar tamanho de banners em JavaScript.

1. Selecionando o banner com JavaScript

Primeiro, precisamos acessar o elemento do banner no DOM (Document Object Model). Suponha que o banner possua um id chamado “banner”.

<div id="banner" style="background-color: #4CAF50; width: 300px; height: 150px;">
    Banner Promocional
</div>

No JavaScript, selecione o banner pelo id:

const banner = document.getElementById("banner");

2. Ajustando o tamanho do banner

Para ajustar o tamanho do banner de acordo com o tamanho da janela, você pode usar o evento resize. Vamos definir que o banner ocupe 80% da largura da tela e mantenha uma altura proporcional.

function ajustarTamanhoBanner() {
    const larguraTela = window.innerWidth;
    banner.style.width = `${larguraTela * 0.8}px`;
    banner.style.height = `${(larguraTela * 0.8) * 0.5}px`; // Define uma altura proporcional à largura
}

3. Usando o evento resize

Agora, vamos chamar a função ajustarTamanhoBanner sempre que a janela for redimensionada para que o banner se ajuste automaticamente.

window.addEventListener("resize", ajustarTamanhoBanner);

4. Chamando a função ao carregar a página

Para garantir que o banner tenha o tamanho correto ao carregar a página, chame a função logo após definir o evento resize:

window.addEventListener("load", ajustarTamanhoBanner);

Código completo

Aqui está o código completo para ajustar dinamicamente o tamanho do banner:

<div id="banner" style="background-color: #4CAF50; width: 300px; height: 150px;">
    Banner Promocional
</div>

<script>
    const banner = document.getElementById("banner");

    function ajustarTamanhoBanner() {
        const larguraTela = window.innerWidth;
        banner.style.width = `${larguraTela * 0.8}px`;
        banner.style.height = `${(larguraTela * 0.8) * 0.5}px`;
    }

    window.addEventListener("resize", ajustarTamanhoBanner);
    window.addEventListener("load", ajustarTamanhoBanner);
</script>

Outro exemplo prático

O código abaixo faz com que banners sejam exibidos de acordo com o tamanho disponível na tela, com o auxílio das Media Queries CSS:

<style>

@media(min-width: 10em) { .topo-lucrei { width: 300px; height: 250px; } }
@media(min-width: 30em) { .topo-lucrei { width: 320px; height: 100px; } }
@media(min-width: 62.5em) { .topo-lucrei { width: 320px; height: 100px; } }
@media(min-width: 90em) { .topo-lucrei { width: 728px; height: 90px; } }

</style>

Acima configuramos o “topo-lucrei” de acordo com a largura da página.

Abaixo modificamos o script fornecido pelo Google, acrescentando os códigos “ca-pub” e “data-ad-slot” de sua conta no Adsense:

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">


<ins class="adsbygoogle topo-lucrei"
style="display:inline-block"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890"></ins>
     
<script>

(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Com esses passos simples, você pode ajustar o tamanho do banner em tempo real, melhorando a experiência do usuário. Essa técnica pode ser aplicada para ajustar outros elementos da página e garantir um design responsivo!

Dúvidas ou sugestões sobre como ajustar tamanho de banners em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits