Html 在Hero部分中同时zoom 背景图像和形状的问题

我正面临着一个问题，在我的网页上的英雄部分的比例.HERO部分包括一个背景图像和一个使用Shape-Default类创建的自定义形状(一个大三角形/左箭头).目标是使背景图像和形状在调整浏览器窗口大小时按比例zoom .但正如你在下面看到的那样，这并不会发生.

随着浏览器窗口大小的调整，形状开始出血或在其自身与背景图像之间产生间隙.我已try 调整背景大小和剪辑路径属性，但问题仍然存在.

这是它的代码https://codepen.io/boostai/pen/yLZEgro

HTML个

<section class="uk-section uk-padding-remove background-hero" style="background-image: url(https://picsum.photos/1600/900)">
<div class="uk-flex uk-flex-right@l">
    <div class="shape-default uk-height-large@l uk-height-unset uk-background-purple uk-flex uk-flex-top uk-flex-middle@l">
        <div class="uk-margin-auto-left uk-width-4-5@s uk-padding-small-top uk-padding-remove-top@l">

            <h1 class="uk-text-white uk-text-boldest uk-margin-small-top uk-width-4-5@l">
                Lorem Ipsum is simply dummy text of the printing and typesetting </h1>

            <div class="uk-text-white uk-text-bold uk-width-4-5@l">
                <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>

        </div>
    </div>
</div>
</section>

CSS个

.background-position-hero {
    background-size: 63% auto;
}

.background-hero {
    background-size: 50%;
    background-repeat: no-repeat;
}

/* MOBILE */
@media screen and (max-width: 960) {
    .background-hero {
        background-image: none;
    }
}

/* ----------- Retina Screens ----------- */
@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi) {
    .background-hero {
        background-size: auto 100%;
        background-repeat: no-repeat;
    }
}

/* Hero
   ========================================================================== */
.homepage-hero {
    background-size: 60vw auto;
    background-repeat: no-repeat;
    background-position: left center;
    padding: 0;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* This makes the overlay and its content not block user interactions */
}

@media screen and (max-width: 960px) {
    .homepage-hero {
        height: auto;
    }

    .homepage-hero a {
        position: relative;
    }

    .overlay {
        top: 18%;
        left: 25%;
        height: auto;
    }
}

.shape-default {
    width: 60vw;
    /*  min-height: 450px;*/
    max-width: 100%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 15% 100%, 5% 50%);
    z-index: 1;
    background-color: #59195d;
}

@media screen and (max-width: 960px) {
    .shape-default {
        width: 100%;
        border-radius: unset;
        min-height: 0;
        clip-path: none;
        padding: 0 15px;
    }

    .shape-default h1 {
        font-size: 1.6rem;
    }
}

/* Weight modifier
  ========================================================================== */
.uk-text-boldest {
    font-weight: 900;
}

/* Color modifiers
  ========================================================================== */
.uk-text-white {
    color: #fff !important;
}

/* Small
 ========================================================================== */

.uk-padding-small-top {
    padding-top: 15px;
}

/* Remove
 ========================================================================== */
/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-padding-remove-top\@s {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@s {
        padding-bottom: 0 !important;
    }
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-padding-remove-top\@m {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@m {
        padding-bottom: 0 !important;
    }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-padding-remove-top\@l {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@l {
        padding-bottom: 0 !important;
    }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-padding-remove-top\@xl {
        padding-top: 0 !important;
    }
    .uk-padding-remove-bottom\@xl {
        padding-bottom: 0 !important;
    }
}

/* ========================================================================
   Component: Height
 ========================================================================== */
.uk-height-xlarge {
    height: 840px;
}
.uk-height-max-xlarge {
    max-height: 840px;
}
.uk-height-unset {
    height: unset;
}

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-height-unset\@s {
        height: unset;
    }
    .uk-height-large\@s {
        height: 450px;
    }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-height-unset\@m {
        height: unset;
    }
    .uk-height-large\@m {
        height: 450px;
    }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-height-unset\@l {
        height: unset;
    }
    .uk-height-large\@l {
        height: 450px;
    }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-height-unset\@xl {
        height: unset;
    }
    .uk-height-large\@xl {
        height: 450px;
    }
}

/* Alignment
 ========================================================================== */
/*
 * Align items in the cross axis of the current line of the flex container
 * Row: Vertical
 */

/* Phone landscape and bigger */
@media (min-width: 640px) {
    .uk-flex-middle\@s {
        align-items: center;
    }
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
    .uk-flex-middle\@m {
        align-items: center;
    }
}
/* Desktop and bigger */
@media (min-width: 1200px) {
    .uk-flex-middle\@l {
        align-items: center;
    }
}
/* Large screen and bigger */
@media (min-width: 1600px) {
    .uk-flex-middle\@xl {
        align-items: center;
    }
}
 

如何确保在调整浏览器窗口大小时，背景图像和形状一起zoom 并保持其比例？