问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

在响应中隐藏图像？

社区维基
1
新手上路，请多包涵

我是引导程序编码的新手，而且 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>

需要帮助。

原文由 Riteu 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译cssbootstrap
阅读 385
2 个回答
得票最新
社区维基
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>

原文由 roopa mishra 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

使用下面的代码，它可能会帮助你..

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

原文由 KiranPurbey 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题