根據屏幕尺寸

我試圖改變依賴於使用媒體查詢與屏幕尺寸的圖片src更改圖片src。我試過背景：url（x）;但它不起作用。我在某處讀到我應該使用content：url（x），但是當我這樣做時，我得到一個空白頁面。任何人都可以告訴我我的代碼有什麼問題嗎？根據屏幕尺寸

HTML：

<div class="container" id="at-header"> 
    <img class="image" id="logo" src="img/logo_white.png" /> 
    <img class="image" id="main-img" src="img/desktop_homepage.jpg" /> 
</div>

CSS：

@media screen and (max-width: 767px){ 
    #main-img{  
     content:url("img/mobile_homepage.jpg"); 
    } 
} 

@media screen and (min-width: 768px) {  
    #main-img{  
     content:url("img/tablet_homepage.jpg"); 
    } 
} 
@media (min-width: 992px){  
     #main-img{   
      content:url("img/desktop_homepage.jpg"); 
     } 
} 
@media (min-width: 1200px) {  
    #main-img{   
     content:url("img/desktop_homepage.jpg"); 
    } 
}

來源

2015-05-26 kot09

你有這樣的服務器上？ –

如果CSS是在一個外部文件，然後記得在CSS文件的URL是相對於css文件，而不是的CSS規則適用於HTML。 –

嘗試使用background-image css規則，確保地址相對於css文件。 –

，這是爲我工作：

#main-img { 
 
    
 
    height: 250px; 
 
    width:100% 
 
} 
 

 
@media screen and (max-width: 767px) { 
 
    #main-img{ 
 
    \t background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); 
 
    } 
 
} 
 

 
@media screen and (min-width: 768px) {  
 
    #main-img{  
 
    \t background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); 
 
    } 
 
} 
 
@media (min-width: 992px) {  
 
     #main-img{   
 
      background-image: url(http://subtlepatterns.com/patterns/paisley.png); 
 
     } 
 
} 
 
@media (min-width: 1200px) {  
 
    #main-img{   
 
     background-image: url(http://subtlepatterns.com/patterns/paisley.png); 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="container"> 
 
    <div id="main-img" /> 
 
</div>

來源

2015-05-26 14:12:05 nozzleman

這一個是幹活g對我來說。我不知道你是否熟悉這個標籤，但它甚至不需要CSS。

<picture> 
    <source media="(min-width: 900px)" srcset="BigImage.png"> 
    <source media="(min-width: 480px)" srcset="MediumImage.png"> 
    <img src="OtherImage.png" alt="IfItDoesntMatchAnyMedia"> 
</picture>

在這種情況下，「BigImage」會顯示何時設備寬度超過900px。「MediumImage」超過480px時，「OtherImage」如果小於480px。如果你有「最大寬度：900px」而不是最小寬度，它也會顯示寬度超過900px的時間。

希望它有幫助！

來源

2017-06-20 20:42:15 SorenDev

根據屏幕尺寸

回答

相關問題