隐藏图像的反应？
隐藏图像的反应？
提问于 2017-04-21 04:25:02
我刚开始进行引导编码和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>需要帮助。
回答 5
Stack Overflow用户
回答已采纳
发布于 2017-04-21 07:15:09
请实现此代码。
您可以根据需要在媒体查询中更改最大宽度。此外，请展开片段，以检查，隐藏和显示图像根据设备。我希望它能对你有用。
<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>
Stack Overflow用户
发布于 2017-04-21 05:59:29
使用下面的代码，可能会对你有帮助。
<!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查询来隐藏第一个图像，并在移动视图上显示第二个图像。
Stack Overflow用户
发布于 2017-04-21 04:28:51
您可能想看看图像元素。现在支持得很好。示例：
<picture>
<source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
<img src="mdn-logo-narrow.png" alt="MDN">
</picture>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43533942
复制相关文章
相似问题
腾讯云开发者
