Как можно адаптировать абсолютно с позиционированную картинку справа?
.clients-slider{
position: relative;
max-width: 1200px;
overflow: hidden;
margin: 0 auto;
}
.clients-slider-line{
background-color: #fff;
margin: 0 auto;
transition: all 1s;
display: flex;
}
.clients-slider-img{
margin-top: 50px;
}
.clients-slider-line-wrapper{
text-align: center;
font-size: 34px;
}
.clients-slider-dots{
display: flex;
column-gap: 12px;
justify-content: center;
margin-top: 97px;
}
.clients-slider-dot{
width: 16px;
height: 16px;
background-color: #D4D4D4;
border-radius: 50%;
cursor: pointer;
}
.active-dot{
background-color: #FE6B01;
}
.clients-slider-title{
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 28px;
line-height: 28px;
text-transform: capitalize;
margin-top: 60px;
color: #050931;
}
.clients-slider-text{
font-family: 'Nunito', sans-serif;
font-weight: 400;
font-size: 20px;
line-height: 36px;
letter-spacing: -0.015em;
max-width: 1002px;
margin: 40px auto 0 auto;
color: #647685;
}
.clients-slider-continue{
font-family: 'Rubik', sans-serif;
font-weight: 400;
font-size: 18px;
line-height: 18px;
text-align: center;
text-transform: capitalize;
margin-top: 48px;
color: #647685;
}
/* left-part-images*/
.clients-wrapper-images-left-top{
position: absolute;
height: 163px;
width: 163px;
top: 115px;
left: calc((1434/1600)*100%);
z-index: 5;
}
.clients-wrapper-images-left-middle{
position: absolute;
height: 87px;
width: 87px;
top: 252px;
left: 78%;
z-index: 5;
}
.clients-wrapper-images-left-bottom{
position: absolute;
height: 87px;
width: 87px;
top: 568px;
left: 78%;
z-index: 5;
}
.clients-wrapper-images-bottom-left-end{
position: absolute;
width: 163px;
height: 163px;
left: calc((1434/1600)*100%);
top: 544px;
z-index: 5;
}
/* right-part-images*/
.clients-wrapper-images-right-top{
position: absolute;
height: 55px;
width: 55px;
top: 197px;
left: 14%;
z-index: 5;
}
.clients-wrapper-images-right-middle{
position: absolute;
height: 55px;
width: 55px;
top: 324px;
left: 2%;
z-index: 5;
}
.clients-wrapper-images-right-bottom{
position: absolute;
height: 103px;
width: 103px;
top: 441px;
left: 7.4%;
z-index: 5;
}
.clients-wrapper-images-right-bottom-end{
position: absolute;
width: 171px;
height: 171px;
top: 539px;
right: 89.2%;
z-index: 5;
}<body>
<section class="clients">
<div class="container">
<div class="clients-wrapper">
<div class="clients-wrapper-images">
<div class="clients-wrapper-images-left">
<img src="img/woman-top-part-left.png" alt="" class="clients-wrapper-images-left-top">
<img src="img/old-woman.png" alt="" class="clients-wrapper-images-left-middle">
<img src="img/woman-with-flowers.png" alt="" class="clients-wrapper-images-left-bottom">
<img src="img/woman-suit.png" alt="" class="clients-wrapper-images-bottom-left-end">
</div>
<div class="clients-wrapper-images-right">
<img src="img/woman-asian.png" alt="" class="clients-wrapper-images-right-top">
<img src="img/man-hat.png" alt="" class="clients-wrapper-images-right-middle">
<img src="img/man-beard.png" alt="" class="clients-wrapper-images-right-bottom">
<img src="img/man-young.png" alt="" class="clients-wrapper-images-right-bottom-end">
</div>
</div>
<h2 class="clients-title">FAQ</h2>
<img src="img/orange-underline-supershort.png" alt="" class="clients-title-img">
<p class="clients-subtitle">Qur Clients Say</p>
</div>
<div class="clients-slider">
<div class="clients-slider-line">
<div class="clients-slider-line-wrapper">
<img src="img/client-man.png" alt="" class="clients-slider-img">
<p class="clients-slider-title">They are Simple Great</p>
<p class="clients-slider-text">There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
<p class="clients-slider-continue">They are Simple Great</p>
</div>
<div class="clients-slider-line-wrapper">
<img src="img/woman-with-flowers.png" alt="" class="clients-slider-img">
<p class="clients-slider-title">They are Simple Great</p>
<p class="clients-slider-text">There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
<p class="clients-slider-continue">They are Simple Great</p>
</div>
<div class="clients-slider-line-wrapper">
<img src="img/old-woman.png" alt="" class="clients-slider-img">
<p class="clients-slider-title">They are Simple Great</p>
<p class="clients-slider-text">There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
<p class="clients-slider-continue">They are Simple Great</p>
</div>
<div class="clients-slider-line-wrapper">
<img src="img/client-man.png" alt="" class="clients-slider-img">
<p class="clients-slider-title">They are Simple Great</p>
<p class="clients-slider-text">There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
<p class="clients-slider-continue">They are Simple Great</p>
</div>
</div>
<div class="clients-slider-dots">
<div class="clients-slider-dot active-dot"></div>
<div class="clients-slider-dot"></div>
<div class="clients-slider-dot"></div>
<div class="clients-slider-dot"></div>
</div>
</div>
</div>
</section>
<script src="main.js"></script>
</body>
Попробовал через left: calc((1434/1600)*100%); не получилось, сразу внизу появляется скролл и изображение выходит за экран, может что-то нужно для calc добавить или есть иной способ адаптации таких изображений.
Источник: Stack Overflow на русском