@media查詢<img> src交換不能正常工作

我在這裏查看了一些問題和答案，仍然無法找到我的問題。@media查詢<img> src交換不能正常工作

我想要做的是：取決於屏幕的大小，打開或關閉這三個圖像的顯示屬性。一次只能顯示一個圖像。

我還沒有應用任何css給.imagephone，除了@media查詢部分列出的。

.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>

來源

2016-11-05 Erdna

請檢查此鏈接：http：//stackoverflow.com/questions/27853884/media-queries-and-image-swapping –

你有一個錯字，應該是'max-width：1200px'帶冒號.. 。並且沒有引號......並交換'@ media'查詢並將'@Media數位板'放到最後 – LGSon

\t .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>

試試這個。

希望它有幫助。

來源

2016-11-05 13:37:38

@media查詢<img> src交換不能正常工作

回答

相關問題