您好,我想知道是否可以使用媒体查询通过 CSS 将图像缩小一定百分比(比如 10%)。
这是我目前所拥有的。 https://jsfiddle.net/gavinfriel/d98sv4cy/
我正在使用像这样的内容 url 来获取图像,因此如果可能的话避免使用 background 属性,我们将不胜感激。
#logo:before {
content: url(http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/56f3b98c7da24fd59ecdfa03/1458813324535/irishwater.png);
}
最佳答案
它看起来像下面的 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%;
}
}
关于css - 使用 css 媒体查询按百分比缩小图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36203260/