Проблема с position absolute

Question

При адаптации заметил что изображение intro__bg-repson выходи за пределы контейнера, из-за чего при уменьшение ширины экрана картинка выходит из body и образуется такая картинка

Знает ли кто-нибудь возможно ли поместить изображение с absolute в контейнер, либо какой-нибудь другой способ без использования position absolute? Заранее спасибо p.s первый раз пользуюсь форумом, не знаю как нормально залить код с изображениями

// Intro
.intro {

    // .intro__bg
    &__bg{
        width: 100%;
    }

    // .intro__logo

    &__logo {
        margin: 75px 0 112px 345px;
        height: 60px;
        width: 170px;
        @media (max-width: 1024px){
            margin: 50px auto;
            display: flex;
            justify-content: center;
        }
    }

    // .intro__text-box

    &__text-box {
        position: relative;
        margin-left: 345px;
        @include adaptiveValue("margin-left", 345, 220, 1300, 1024, 1);
        @media (max-width: 1024px){
            display: flex;
            margin-left: 0;
            flex-wrap: wrap;
            justify-content: center;
        }
    }

    // .intro__title

    &__title {
        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 700;
        font-size: 55px;
        @include adaptiveValue("font-size", 55, 45, 1300, 1024, 1);
        line-height: 128.02%;
        color: #FFFFFF;
        @media (max-width: 1024px){
            text-align: center;
        }
    }

    // .intro__title-date

    &__title-date {
        margin-top: 30px;

        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        @include adaptiveValue("font-size", 36, 26, 1300, 1024, 1);
        line-height: 98.02%;
        color: #FFFFFF;
        @media (max-width: 1024px){
            text-align: center;
            width: 450px;
        }
    }

    // .intro__title-table

    &__title-table {
        margin: 60px 0 57px 0;
        padding: 0;

        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 36px;
        @include adaptiveValue("font-size", 36, 26, 1300, 1024, 1);
        line-height: 98.02%;
        color: #FFFFFF;
        @media (max-width: 1024px){
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
    }

    // .intro__text

    &__text {
        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 500;
        font-size: 18px;
        line-height: 169.52%;
        color: #FFFFFF;
        margin-left: 20px;
        position: relative;
        &:first-child {
            margin-top: 25px;
        }

        &:before {
            content: '●';
            color: $mainGrey;
            position: absolute;
            left: -20px;
        }
        @media (max-width: 1024px){
           width: 400px;
        }
    }

    //intro__btn

    &__btn {
        width: 235px;
        height: 50px;

        font-family: 'Noto Sans';
        font-style: normal;
        font-weight: 600;
        font-size: 16px;
        line-height: 98.02%;
        color: #FFFFFF;

        border: none;
        background: $mainBlue;
        border-radius: 21px;

        position: relative;
        overflow: hidden;
        transition: .3s ease;
        &:before {
            content: '';
            width: 100%;
            height: 200%;
            position: absolute;
            top: 0; left: 0;
            opacity: 0.5;
            filter: blur;
            background: linear-gradient(to left, transparent 0%, #fff 40%, #fff 60%, transparent 100%);
            transform: translate(-100%, -25%) rotate(10deg);
            animation: blick 3s infinite;
          } 
          &:hover {
            transform: scale(1.2);
          }
          @keyframes blick {
            0% {
              transform: translate(-100%, -25%) rotate(10deg);
            }
            20% {
              transform: translate(100%, -25%) rotate(10deg);
            }
            100% {
              transform: translate(100%, -25%) rotate(10deg);
            }
          }
    }

    // .intro__bg-person

    &__bg-person {
        position: absolute;
        left: 1045px;
        @include adaptiveValue("left", 1045, 750, 1300, 1024, 1);
        top: 260px;
        @include adaptiveValue("width", 855, 775, 1300, 1024, 1);
        @include adaptiveValue("height", 742, 662, 1300, 1024, 1);
        @media (max-width: 1024px){
            position: static;
            margin: 75px auto 0;
            display: flex;
            justify-content: center;
        }
    }
}

<div class="intro__bg">
    <div class="intro">
        <img class="intro__logo" alt="Лого" src="../img/Intro/Logo.svg"/>
    <div class="intro__text-box">
        <div class="intro__title">Где спрятались мои миллионы?</div>
        <div class="intro__title-date">ОН-ЛАЙН интенсив 24, 25, 26 августа 2022 г.</div>
        <ul class="intro__title-table">За 3 дня Вы сможете понять как:
            <li class="intro__text">будущей доходностью.</li>
            <li class="intro__text">выстроить рабочие процессы и написать регламенты.</li>
            <li class="intro__text">повысить эффективность команды.</li>
        </ul>
        <button href="#" class="intro__btn">Хочу на интенсив</button>
        
    </div>
    <img src="../img/Intro/Intro-bg-person.png" alt="Создатель курса" class="intro__bg-person">
    </div>
</div>

БЛОГ НА HUSL

Проблема с position absolute

Ответы (0 шт):