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

我正在创建一个网站，其中，当屏幕尺寸很小时显示图像，但随着屏幕尺寸变大而消失。如何在屏幕变宽时隐藏图像？

图像在搜索按钮下方。

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

请帮助我！

来源

2017-05-04 Chirag Jain

搜索栏和按钮都对我有当屏幕宽。 –

在**搜索**按钮下方有图像，只在小屏幕上可见。 –

@MichaelCoker先生谢谢你对这个问题感兴趣。 –

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

CSS

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

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

来源

2017-05-04 18:11:12

谢谢，它帮了我，先生。 –

但先生我需要一个图像只显示在50px高度。 –

然后保持它50px而不是100％。但不要改变高宽比。 –

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

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

来源

2017-05-04 19:48:07 chairmanmow

我必须显示图像.. –

@Chiru @habmanmow的片段正是您所需要的。你只需要添加这个CSS规则。这个规则说，如果视口的宽度小于400px，它会拥有你给'.advtimg'的任何样式。但如果视口大于400px，则'.advtimg'的样式为'display：none;'这意味着该元素不可见。请点击此处查看更多信息：https：//www.w3schools.com/css/css_rwd_mediaqueries.asp –

更改CSS来： -

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

来源

2017-05-06 16:55:16

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

回答

相关问题