2

Eu tenho esse código (abaixo), onde consigo criar um banner randômico, mas ele não é responsivo, ou melhor, a imagem não é responsiva.

<style type="text/css">

.banner{

width:100%;
height: auto;
}


</style>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<body>

<div class="banner">
<a href="" class="random"></a>
</div>

<script>
      var randomImage = {
        paths: [
          "http://ramosdesignservidor.com.br/teste/img/slide01.jpg",
          "http://ramosdesignservidor.com.br/teste/img/slide02.jpg",
          "http://ramosdesignservidor.com.br/teste/img/slide03.jpg",
        ],
        generate: function(){
          var path = randomImage.paths[Math.floor(Math.random()*randomImage.paths.length)];
          var img = new Image();
          img.src = path;
          $("a.random").html(img);
          $("a.random").attr("href", path);
        }
      }
      randomImage.generate();
</script>

</body>

Preciso de uma ajuda!

Tem como eu fazer esse banner ficar responsivo?

1 Resposta 1

1

Para isso, você pode utilizar Media Queries do CSS!

Aqui vai o conteúdo para entender mais sobre Media Queries: Deixando seus elementos responsivos com Media Queries

Um exemplo simples para isso, que já é utilizado no começo do site, seria isso:

<style>
    @media (max-width: 600px) {
      .banner {
        display: none;
       }
    }
</style>

Esse estilo fará seu banner desaparecer caso a largura do seu navegador seja menor do que 600px.

Basta trocar o estilo dentro de .banner e o tamanho de max-width e max-height para decidir como você quer que fiquem seus elementos de acordo com o tamanho da tela :)

Espero ter ajudado!

Giulio~

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 .