Creating Responsive Random Image

Question

Creating Responsive Random Image

Navigation

#1 by (1 votes)

2

I have this code (below), where I can create a random banner, but it is not responsive, or rather the image is not responsive.

<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>

I need some help!

How can I make this banner stay responsive?

imagem layout-responsivo

asked by anonymous 24.05.2016 / 22:03

1 answer

Array returning Undefined because of asynchronism Error creating MySql foreign key in phpMyAdmin?

score 1 · Accepted Answer

For this you can use Media Queries of CSS!

Here's the content to understand more about Media Queries: Leaving your responsive elements with Media Queries

A simple example for this, which is already used at the beginning of the site, would be this:

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

This style will make your banner disappear if your browser width is less than 600px .

Simply change the style inside .banner and the max-width and max-height size to decide how you want your elements to fit according to the screen size:

I hope I have helped!

Giulio ~