css - 使用 css 媒体查询按百分比缩小图像

Question

您好，我想知道是否可以使用媒体查询通过 CSS 将图像缩小一定百分比(比如 10%)。

这是我目前所拥有的。 https://jsfiddle.net/gavinfriel/d98sv4cy/

我正在使用像这样的内容 url 来获取图像，因此如果可能的话避免使用 background 属性，我们将不胜感激。

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

Answer 1

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

CSS

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

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