Creating Responsive Random Image

Asked

Viewed 283 times

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!

Can I make this banner responsive?

image responsive-layout

1 answer

1


For this, you can use Media Queries of the CSS!

Here is the content to understand more about Media Queries: Making your elements responsive 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 smaller than 600px.

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

I hope I’ve helped!

Giulio~

Browser other questions tagged image responsive-layout

You are not signed in. Login or sign up in order to post.