我在这里查看了一些问题和答案,但仍然找不到我的问题。
我想做的是: 根据屏幕大小打开或关闭这三个图像的显示属性。一次只能显示一张图像。
除了@media 查询部分中列出的内容外,我没有将任何 css 应用到 .imagephone。
.imgcontainer{
background-color: red;
width: 100%;
overflow: hidden;
max-width: 1500px;
margin: auto;
}
.imagetablet{
display: none;
}
.imagedesktop{
display: none;
}
/**************@Media Tablets****************/
@media screen and (max-width="800px"){
.imagephone{display:none;}
.imagetablet{display:block;}
.imagedesktop{display:none;}
}
/**************@Media Desktop*****************/
@media screen and (max-width="1200px"){
.imagephone{display:none;}
.imagetablet{display:none;}
.imagedesktop{display:block;}
}
<div class="imgcontainer">
<img class="imagephone" src="BannerPicSmall.png">
<img class="imagetablet" src="BannerPicMedium.png">
<img class="imagedesktop" src="BannerPicLarge.png">
</div>
最佳答案
.imgcontainer{
background-color: white;
width: 100%;
overflow: hidden;
max-width: 1500px;
margin: auto;
}
.imagetablet{
display: none;
}
.imagedesktop{
display: none;
}
/**************@Media Tablets****************/
@media screen and (max-width:800px){
.imagephone{display:none !important;}
.imagetablet{display:block !important;}
.imagedesktop{display:none !important;}
}
/**************@Media Desktop*****************/
@media screen and (max-width:1200px){
.imagephone{display:none !important;}
.imagetablet{display:none !important;}
.imagedesktop{display:block !important;}
}
<div class="imgcontainer">
<img class="imagephone" src="http://www.claudelorrain.org/An-Artist-Studying-Nature.jpg">
<img class="imagetablet" src="http://hdwallpaperia.com/wp-content/uploads/2015/01/Nature-Wallpaper-daydreaming-34811101-1024-7686-640x480.jpg">
<img class="imagedesktop" src="http://hdwallpaperia.com/wp-content/uploads/2013/10/Beautiful-Nature-Desktop-Wallpaper-640x360.jpg">
</div>
试试这个。
希望对您有所帮助。
关于html - @media query <img> src swap 不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40438040/