使用css媒体查询按百分比刷新图像

嗨，我想知道是否有可能通过css使用媒体查询将图像缩小一个百分比（比如10%）

这是我到目前为止所拥有的

我正在使用一个像这样的内容url来源图像，如果可能的话，避免使用背景属性，我会很感激

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

---

它看起来像下面的CSS。媒体查询用于响应性设计。例如，当屏幕宽度为200px时，图像将是其原始大小的10%，当屏幕宽度为400px时，图像将是50%

CSS

---

谢谢你，伙计。我现在有另一个问题。因为我使用的是

#irishwater:before{

（这样IE/Edge就可以使用

content

属性，图像不会回复到媒体查询。当我删除

：before

标记时，它会起作用。关于其他方法的任何建议？请注意顺序-

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

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