将图像隐藏在响应中

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

需要帮助。

请实现此代码。

您可以根据需要更改媒体查询中的最大宽度。另外，请扩展摘要以检查藏身并根据设备显示图像。我希望它对您有用。

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

使用以下代码，它可能会帮助您..

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="Masters_baby.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <style type="text/css">
       @media(max-width:767px){
            .image1 {
                display: block!important; 
            }
            .image2 {
                display: none !important; 
            }
        }
    </style>
  </head>
  <body>
        <div class="row">
             <img src="img/kiran.png" alt="img1" style="height: 200px;width: 200px;display:none;" class="image1">   
             <img src="img/kiran2.png" alt="img1" style="height: 200px;width: 200px;display: block;" class="image2"> 
        </div>
  </body>
</html>

我使用@Media查询隐藏了第一个图像，并在移动视图上显示第二张图像。

您可以使用Bootstrap响应式实用程序根据屏幕尺寸显示/隐藏组件。

您的代码片段已被修改为示例。

仅在中型屏幕中可见第一个图像
第二张图像将隐藏在中型屏幕上

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

更新：尝试以下课程：http://getbootstrap.com/css/#responsive-utiness-classes

对于只能在桌面中显示的图像使用：

hidden-xs hidden-sm hidden-md

对于仅在移动使用上显示的图像：

hidden-lg隐藏xl

示例：

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

您可能想查看图片元素。支持现在很好。示例：

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

相关内容

最新更新

热门标签：