Question

我有一个我在网站上使用的SVG图像。但是，我想要它，以便当浏览器宽度小于292px时，SVG图像将调整大小变小。

这是我在SVG上的当前代码。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="25" height="25" viewBox="0 0 141 141">

<defs>

<style type="text/css">

.cls-2 {
    fill: #fff;
}

#smaller {
    height="15";
    width="15";
}


@media screen and (max-width: 292px) {

    #smaller {
        display: block;    
    }

}

</style>




</defs>
<path d="M70.500,-0.003 C31.562,-0.003 -0.003,31.562 -0.003,70.500 C-        0.003,109.437 31.562,141.002 70.500,141.002 C109.437,141.002 141.002,109.437 141.002,70.500 C141.002,31.562 109.437,-0.003 70.500,-0.003 ZM99.628,83.851 C99.628,83.851 81.325,64.143 81.325,64.143 C81.325,64.143 81.325,118.311 81.325,118.311 C81.325,118.311 59.675,118.311 59.675,118.311 C59.675,118.311 59.675,64.137 59.675,64.137 C59.675,64.137 41.367,83.851 41.367,83.851 C41.367,83.851 24.432,72.287 24.432,72.287 C24.432,72.287 56.661,37.585 56.661,37.585 C56.661,37.585 70.498,22.688 70.498,22.688 C70.498,22.688 84.335,37.585 84.335,37.585 C84.335,37.585 116.567,72.287 116.567,72.287 C116.567,72.287 99.628,83.851 99.628,83.851 Z" id="path-1" class="cls-2" fill-rule="evenodd"/>
</svg>

但是，此代码似乎不起作用。我可以做些什么来缩小媒体查询？

Answer 1

您的CSS语法不正确，但如果您希望缩小图片，它将如下所示：

#smaller {
    height: 15px;
    width: 15px;
}

@media screen and (max-width: 292px) {
    #smaller {
        height: 10px;
        width: 10px;
    }
}

使用媒体查询使SVG图像响应

1 个答案: