通過使用CSS媒體查詢百分比Shink圖像

Question

您好我想知道是否有可能通過CSS使用媒體查詢縮小圖像的百分比（比如10％）。

這是我到目前爲止。 https://jsfiddle.net/gavinfriel/d98sv4cy/

我正在使用像這樣的內容url來源圖像，所以如果可能避免使用背景屬性，將不勝感激。

#logo:before { 
    content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3b98c7da24fd59ecdfa03/1458813324535/irishwater.png); 
} 

Answer 1

它看起來像下面的CSS。媒體查詢用於響應式設計。例如，在200px的屏幕寬度下，圖像將佔其原始大小的10％，在400px寬度時將爲50％。

CSS

@media screen and (max-width: 200px) { 
    #irishwater { 
     width: 10%; 
     height:10%; 
     } 
} 

@media screen and (max-width: 400px) { 
    #irishwater { 
     width: 50%; 
     height:50%; 
     } 
}