Javascript 当屏幕变宽时，如何隐藏图像？

我正在创建一个网站，在其中，图像显示时，屏幕尺寸很小，但随着屏幕尺寸越来越大，它消失了

图像位于搜索按钮下方

通过更改浏览器的宽度来查看

图像编码：-

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

.advt{边界：无；
宽度：100%；
最大高度：100%；}
.advtimg{宽度：100%；高度：50px}
//将图像放置在此阵列中
var random_images_array=['1.png'，'2.png'，'3.jpg'，'4.jpg']；
函数getRandomImage（imgAr，路径）{
path=path | |'images/advertisment/'；//此处的默认路径
var num=Math.floor（Math.random（）*imgAr.length）；
var img=imgAr[num]；
var imgStr=''；
document.write（imgStr）；document.close（）；
}
getRandomImage（随机图像数组）

---

请帮帮我

您有固定的高度和可变的宽度。将高度更改为100%

CSS

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

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

---

使用CSS媒体查询。我将使用400px作为一个示例断点，您不想在其中显示图像

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

将CSS更改为：-

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

.advt{边界：无；
宽度：100%；
最大高度：100%；}
.advtimg{宽度：100%；高度：50px}

当屏幕较宽时，搜索字段和按钮就在那里。搜索按钮下方有图像，仅在小屏幕上可见。@MichaelCoker先生，感谢您对这个问题感兴趣。使用媒体queries@rex先生，你能帮我解决一下吗？谢谢，它帮了我，先生。但是先生，我需要一张只以50px高度显示的图像。然后保持50px，而不是100%。但不要改变高宽比。谢谢，这帮了我的忙，先生。很高兴能帮上忙。您可以将其标记为未来用户的答案。@Chiru@chairmanmow中的代码片段正是您所需要的。您只需添加此css规则。此规则表示，如果视口宽度小于400px，它将具有您为

.advtimg

指定的任何样式。但如果视口宽度大于400px，

.advtimg

的样式为

显示：无表示此元素不可见的内容。请查看此处以了解更多信息：