如何处理使用缩放 +/- 的用户并在我的 HTML 中仍然保持响应能力

Question

我的问题是标记效果很好并且响应迅速，但是如果用户使用 chrome 或 edge 中的缩放功能 -/+ 图像没有响应，它会保持完全相同的大小。注意：我的图像被渲染为背景。

这是我的视口设置：

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

这是我的简单 HTML

<div class="hero-banner">
      <div class="hero-slider">
        <div class="hero-scent_microban_bkgrnd2"></div>
        <div class="hero-scent_microban_bkgrnd3"></div>                
        <div class="hero-scent_microban_bkgrnd"></div>               
      </div>
</div>

这是我的 CSS

@media screen and (min-width: 960px) {
    .hero-banner {
        height: 684px;
        overflow: hidden
    }
}

.hero-banner [class^="hero-scent_"] {
    width: 100%;
    padding-top: 320px;
    font-size: 16px;
    background-repeat: no-repeat;
    background-size: auto 230px;
    background-position: center top;
    background-image: none
}

.hero-banner [class^="hero-scent_"]>.container {
    position: relative;
    max-width: 1128px;
    padding: 0 20px;
    margin: 0 auto
}

.hero-banner [class^="hero-scent_"] .copy {
    max-width: 493px
}

.hero-banner [class^="hero-scent_"] h2 {
    margin: 0 0 0.5em;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--scent-color)
}

.hero-banner [class^="hero-scent_"] h1 {
    margin: 0 0 0.5em;
    font-size: 36px;
    font-weight: 300
}

.hero-banner [class^="hero-scent_"] .links p {
    margin-bottom: 0
}

.hero-banner [class^="hero-scent_"] .btn-link {
    color: var(--scent-color)
}

.hero-banner [class^="hero-scent_"] .image {
    position: absolute;
    right: 0;
    left: 0;
    top: -381.33px;
    width: auto;
    height: auto;
    max-height: 381.33px;
    margin-top: -50px
}

@media screen and (min-width: 768px) {
    .hero-banner [class^="hero-scent_"] {
        background-size: 100% auto
    }

    .hero-banner [class^="hero-scent_"] .image {
        top: -340px
    }
}

@media screen and (min-width: 960px) {
    .hero-banner [class^="hero-scent_"] {
        height: 684px;
        padding: 0;
        background-size: auto 551px;
        background-position: center bottom 133px;
        font-size: 20px
    }

    .hero-banner [class^="hero-scent_"]>.container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        height: 549px
    }

    .hero-banner [class^="hero-scent_"] h2 {
        font-size: 18px
    }

    .hero-banner [class^="hero-scent_"] h1 {
        font-size: 54px
    }

    .hero-banner [class^="hero-scent_"] .image {
        top: auto;
        left: auto;
        right: 0;
        max-height: 1200px;
        width: 1300px;
        padding-top: 20px;
        margin: 0
    }
}

@media screen and (min-width: 1366px) {
    .hero-banner [class^="hero-scent_"] {
        background-size: 100% auto
    }
}

body:not(.no-js) .hero-banner .hero-scent_microban_bkgrnd {
    margin-top: -30px;
    background-image: url(../img/home/bg_microban_overlay1.png), url(../img/home/bg_hero_microban_bkgrnd.png);
    background-size: 96%, 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: center 40%, center
}

body:not(.no-js) .hero-banner .hero-scent_microban_bkgrnd3 {
    margin-top: -30px;
    background-image: url(../img/home/bg_hero_microban_bkgrnd3_a.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center
}

body:not(.no-js) .hero-banner .hero-scent_microban_bkgrnd2 {
    margin-top: -30px;
    background-image: url(../img/home/bg_microban_overlay2.png), url(../img/home/bg_hero_microban_bkgrnd.png);
    background-size: 96%, 100%;
    background-repeat: no-repeat, no-repeat;
    background-position: left, center
}

.hero-banner [class^="hero-scent_"] .btn-link:hover {
    color: #00235b
}

.hero-banner .tns-nav {
    display: block;
    margin-top: 60px
}

@media screen and (min-width: 960px) {
    .hero-banner .tns-nav {
        margin-top: -100px
    }
}