如何顯示多個設備的圖像？

Question

我有一個浮動橫幅，我想要顯示超過50％的大屏幕寬度和100％的小屏幕（移動設備）的寬度。

圖像有時非常小（我認爲在視網膜顯示）。

我該如何改進我的代碼才能在視網膜顯示屏，大屏幕和小型移動設備屏幕上正確顯示？

在的.css

.banner-sticky { 
bottom: -2.5px; 
left: 0px; 
width: 100%; 
text-align: center; 
background: rgb(0, 0, 0) transparent; 
background: rgba(0, 0, 0, 0); 
/* filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";*/ 
} 

.advert-img { 
width: 50% 
height: auto; 
} 
@media screen and (max-width: 380px) and (orientation: portrait) { 
.advert-img { 
width: 100%; 
} 
} 

在.html文件

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
. 
. 
. 
<div id="sticky" class="banner-sticky" style="position: fixed;"> 
    <a id="ad-link" href=' #' ><span id="banner-ad"><img src=' foo.jpg' class="advert-img" /></a> 
</div> 


'<a id="ad-link" href=' + this.landingUrl + ' ><span id="banner-ad"><img src=' + this.imgSrc + ' class="advert-img" /></a>' 

Answer 1

您可以使用CSS媒體查詢來辨別屏幕寬度，這樣的：

body { 
    background: url(foo-small.jpg); 
} 
@media (min-width: 500px) { 
    body { 
    background: url(foo-medium.jpg); 
    } 
} 
@media (min-width: 800px) { 
    body { 
    background: url(foo-large.jpg); 
    } 
} 

在爲了使其工作，您需要將圖像設置爲CSS中的背景，而不是作爲<img>標籤

Answer 2

嘗試使用背景大小的CSS規則爲每分辨率

body { 
    background: url(foo-small.jpg); 
} 
@media (min-width: 500px) { 
    body { 
    background-size:50%; 
    } 
} 
@media (min-width: 800px) { 
    body { 
    background-size:80%; 
    } 
}