使用SVG作为背景图像时，如何保持比率一致？

Question

我建立了一个网站，我的所有尺寸都是大众单位。所以我有320px标准和3.125vw等于10分辨率。

我的问题在视口缩放时浮出水面。星级中的星星由svgs组成，缩放似乎不一致。为什么会发生这种情况？ svg的基本尺寸为11x10px。这是我的HTML

<div class="rating">
    <div class="empty"></div>
    <div class="full rating-5-0"></div>
</div>

CSS

    .recommended-products .product-list .item > .rating {
        margin-left: 25vw;
        position: absolute;
        bottom: 4.6875vw;

        width: 17.1875vw;
        height: 3.125vw;
    }

    .recommended-products .product-list .item .rating > .empty {
        position: absolute;
        height: 100%;
        width: 100%;

        background-image: url("resources/mobile-app/resources/icon_Star_None.svg");
        background-size: contain;
    }

    .recommended-products .product-list .item .rating > .full {
        position: absolute;
        height: 100%;

        background-image: url("resources/mobile-app/resources/icon_Star_Full.svg");
        background-size: contain;

    }

    /* ---- Rating values ---- 0.5 increments */

    .recommended-products .product-list .item .rating > .full.rating-5-0 {
        width: 100%;
    }

    .recommended-products .product-list .item .rating > .full.rating-4-5 {
        width: 90%;
    }

    .recommended-products .product-list .item .rating > .full.rating-4-0 {
        width: 80%;
    }

full star

empty star