Question

我正在创建一个网站，当屏幕尺寸较小时会显示图像，但随着屏幕尺寸变大，它会消失。

图像位于搜索按钮下方。

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

图像编码： -

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

请帮帮我！

Answer 1

你有固定的高度和可变的宽度。将高度改为100％。

<强> CSS

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

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

Answer 2

将CSS更改为： -

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

Answer 3

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

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

如何在屏幕变宽时隐藏图像？

3 个答案: