隐藏图像的响应？

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>