CODEWITHSUNDEEP
javascripthtmlcss
Chirag Jain
Chirag Jain

Reputation: 1387

How to hide an image when screen gets wider?

I am creating a website in which, Image is shown when the screen size is small but as the screen size gets large it disappears.

The image is below search button.

Have a look here, by changing the width of the browser.

Coding for the image:-

<style type="text/css">
.advt { border:none;
width: 100%;
    max-height: 100%;}
.advtimg { width:100%; height:50px}
</style>
<script type="text/javascript">
// place your images in this array
var random_images_array = ['1.png', '2.png', '3.jpg', '4.jpg'];

function getRandomImage(imgAr, path) {
    path = path || 'images/advertisment/'; // default path here
    var num = Math.floor( Math.random() * imgAr.length );
    var img = imgAr[ num ];
    var imgStr = '<img class="advt" src="' + path + img + '" alt = "">';
    document.write(imgStr); document.close();
}

</script>
<div class="advtimg">
<script type="text/javascript">getRandomImage(random_images_array)</script>
</div>

Please help me Out!

Upvotes: 1

Views: 85

Answers (3)

Babalu Pandey
Babalu Pandey

Reputation: 58

Change the CSS to:-

<style type="text/css">
.advt { border:none;
width: 100%;
    max-height: 100%;}
.advtimg { width:100%; height:50px}
</style>

Upvotes: 1

chairmanmow
chairmanmow

Reputation: 650

Use CSS media queries. I'll just use 400px as an example breakpoint where you don't want to show the image.

@media screen and (min-width: 400 px){
    .advtimg {
        display: none;
     }
}

Upvotes: 0

Sumit Ridhal
Sumit Ridhal

Reputation: 1419

You have fixed height and a variable width. change height to 100%.

CSS

.advtimg {
    width: 100%;
    height: 100%;
}

.advt {
    border: none;
    width: 100%;
    height: 100%;
}

Upvotes: 1

Related Questions