通过使用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%; 
     } 
}