css - 在响应中隐藏图像？

Question

我是 bootstrap 编码和 CSS 的新手 我遇到了一个问题，在桌面版本中我需要一张图片，但在移动版本中我需要显示第二张图片并且第一张图片应该隐藏。

<div class="col-md-9" style="padding: 0px;">
    <img src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" />
    <img src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" />
</div>

需要帮助。

Answer 1

请执行此代码。

您可以根据需要更改媒体查询中的最大宽度。另请展开代码段以根据设备检查隐藏和显示图像。 我希望它对你有用。

<style>
.image_section img{
    display: block;
}

@media (max-width:640px){
    .image_section img:first-child{
        display:none;
    }
}
</style>


<div class="col-md-9 image_section" style="padding: 0px;">
    <img src="images/Trinity-Garden-landing-Page-1.jpg" />
    <img src="images/Trinity-Garden-landing-Page-4.jpg" />
</div>