blocks|key|992425|text|您可能想看看图像元素。现在支持得很好。示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|992426|<picture>
++<source+srcset="mdn-logo-wide.png"+media="(min-width:+600px)">
++<img+src="mdn-logo-narrow.png"+alt="MDN">
</picture>|code-block|syntax|javascript|992427|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture^0|6|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You may want to have a look at the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture" rel="nofollow noreferrer">picture element</a>. Support is quite good now. 
Example:</p>

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


blocks|key|2706896|text|您可以使用引导响应实用程序根据屏幕大小显示/隐藏组件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2706897|您的代码片段已被修改为示例。|2706898|第一张图像将仅在中等大小的屏幕上可见。|unordered-list-item|2706899|第二个图像将隐藏在中等大小的屏幕上。|2706900|​|2706901|<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>|code-block|syntax|javascript|2706902|2706903|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#responsive-utilities^0|5|8|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$]]|$1|I|3|J|5|H|7|16|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|O|7|18|8|@]|9|@]|C|$P|Q]]|$1|R|3|L|5|6|7|19|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>You can use <a href="http://getbootstrap.com/css/#responsive-utilities" rel="nofollow noreferrer">bootstrap responsive utilities</a> for showing/hiding components based on the screen size.</p>

<p>Your code snippet has been modified as an example.</p>

<ul>
<li>The first image will be visible in medium sized screens only</li>
<li>The second image will be hidden on medium sized screens</li>
</ul>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="col-md-9" style="padding:0px;"&gt;
  &lt;img class="visible-md-block" src="images/Trinity-Garden-landing-Page-1.jpg" width="1350px" /&gt;
  &lt;img class="hidden-md" src="images/Trinity-Garden-landing-Page-4.jpg" width="1350px" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2706921|text|更新:尝试以下类：http://getbootstrap.com/css/#responsive-utilities-classes|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2706922|对于只能在桌面上显示的图像，请使用：|2706923|隐藏-x隐藏-sm隐藏-md|2706924|对于只能在移动应用上显示的图像：|2706925|隐藏-lg隐藏-xl|2706926|例子：|2706927|<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>|code-block|syntax|javascript|2706928|entityMap|0|LINK|mutability|MUTABLE|url|http://getbootstrap.com/css/#responsive-utilities-classes^0|0|3|9|1L|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]]|E|$]]|$1|F|3|G|5|6|7|18|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|1A|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1B|8|@]|D|@]|E|$]]|$1|N|3|O|5|6|7|1C|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1D|8|@]|D|@]|E|$S|T]]|$1|U|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

<p><strong>UPDATED :</strong>
Try these classes : 
<a href="http://getbootstrap.com/css/#responsive-utilities-classes" rel="nofollow noreferrer">http://getbootstrap.com/css/#responsive-utilities-classes</a></p>

<p>for the image that must only show in the desktop use : </p>

<p>hidden-xs hidden-sm hidden-md</p>

<p>for image that must show only on mobile use : </p>

<p>hidden-lg hidden-xl </p>

<p>example :</p>

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


blocks|key|992473|text|使用下面的代码，可能会对你有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992474|<!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>|code-block|syntax|javascript|992475|其中，我使用@media查询来隐藏第一个图像，并在移动视图上显示第二个图像。|992476|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Use the below code, It might help you..</p>

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

<p>In that I used @media query to hide first image and display second image on mobile view.</p>


blocks|key|992505|text|请实现此代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|992506|您可以根据需要在媒体查询中更改最大宽度。此外，请展开片段，以检查，隐藏和显示图像根据设备。我希望它能对你有用。|992507|​|992508|<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>|code-block|syntax|javascript|992509|992510|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|Q|8|@]|9|@]|A|$I|J]]|$1|K|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Please implement this code.</p>

<p>You can change max width in media query according to your need. Also please expand snippet to check hide and show image according to device.
I hope it will work for you.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;style&gt;
.image_section img{
    display: block;
}

@media (max-width:640px){
    .image_section img:first-child{
        display:none;
    }
}
&lt;/style&gt;


&lt;div class="col-md-9 image_section" style="padding: 0px;"&gt;
    &lt;img src="images/Trinity-Garden-landing-Page-1.jpg" /&gt;
    &lt;img src="images/Trinity-Garden-landing-Page-4.jpg" /&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I am new to bootstrap coding and <code>CSS</code> I am stuck in one issue where in the desktop version i need one image but when it comes to the mobile version i need the second image to be shown and first image should hide. </p>

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

<p>Help needed.</p>


Hiding an image in responsive?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我刚开始进行引导编码和CSS，我被困在一个问题上，在桌面版本中，我需要一个图像，但是当涉及到移动版本时，我需要显示第二个图像，第一个图像应该隐藏。<div class="col-md-9" style="padding: 0px;">    <img src="images/Trinity-Garden-landing...

问隐藏图像的反应？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问隐藏图像的反应？EN