twitter-bootstrap 在响应中隐藏图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43533942/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Hiding an image in responsive?
提问by Riteu
I am new to bootstrap coding and CSSI 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.
我是引导程序编码的新手，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>
Help needed.
需要帮助。
回答by roopa mishra
Please implement this code.
请执行此代码。
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.
您可以根据需要更改媒体查询中的最大宽度。另请展开片段以根据设备检查隐藏和显示图像。我希望它对你有用。
<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>回答by KiranPurbey
Use the below code, It might help you..
使用下面的代码，它可能会帮助你..
<!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>
In that I used @media query to hide first image and display second image on mobile view.
因为我使用@media 查询来隐藏第一张图像并在移动视图上显示第二张图像。
回答by j-printemps
You may want to have a look at the picture element. Support is quite good now. Example:
您可能想看看图片元素。现在支持很好。例子：
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>
回答by niyasc
You can use bootstrap responsive utilitiesfor showing/hiding components based on the screen size.
您可以使用引导响应实用程序根据屏幕大小显示/隐藏组件。
Your code snippet has been modified as an example.
作为示例，您的代码片段已被修改。
- The first image will be visible in medium sized screens only
- The second image will be hidden on medium sized screens
- 第一张图片仅在中等大小的屏幕中可见
- 第二张图片将隐藏在中等大小的屏幕上
<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>回答by Karam Qubsi
UPDATED :Try these classes : http://getbootstrap.com/css/#responsive-utilities-classes
更新：尝试这些类：http: //getbootstrap.com/css/#responsive-utilities-classes
for the image that must only show in the desktop use :
对于只能在桌面上显示的图像，请使用：
hidden-xs hidden-sm hidden-md
隐藏-xs 隐藏-sm 隐藏-md
for image that must show only on mobile use :
对于必须仅在移动设备上显示的图像：
hidden-lg hidden-xl
隐藏-lg 隐藏-xl
example :
例子 ：
<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>
