Question

我是新手编码和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

请执行此代码。

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

＆＃13;

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

＆＃13;

Answer 2

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

<!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查询隐藏第一张图像并在移动视图上显示第二张图片。

Answer 3

您可能需要查看picture element。现在支持很好。例如：

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

Answer 4

您可以使用bootstrap responsive utilities根据屏幕尺寸显示/隐藏组件。

您的代码段已作为示例进行了修改。

第一张图片仅在中型屏幕中可见
第二张图片将隐藏在中等大小的屏幕上

＆＃13;

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

＆＃13;

Answer 5

更新： 试试这些课程： http://getbootstrap.com/css/#responsive-utilities-classes

对于必须仅在桌面使用中显示的图像：

hidden-xs hidden-sm hidden-md

表示必须仅在移动设备上显示的图片：

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

隐藏图像的响应？

5 个答案: