Как сделать составные CSS изображения адаптивными?

Question

На странице есть три карточки,в которых после текста идут несколько изображений.Я расположила их задавая отступы в пикселях.Но как только меняется размер экрана,вся верстка плывет.Может есть способ как задать их адаптивно?

    .sales__row{
    display: flex;
    flex-direction: row;
    gap: 0px 27px;
}
.sales__item img{
    position: relative;
}
.sales__item-circle{
    left: 14px;
    top: 15px;
}
#card1pic1{
    top: -4px;
    left: 49px;
    
}
#card1pic2{
    left: 146px; top: -358px; 
    filter: drop-shadow(6px 0px 7px rgba(55, 34, 22, 0.1));
    
}
#card1pic3{
    left: 61px; top: -538px;
    filter: drop-shadow(6px 0px 7px rgba(55, 34, 22, 0.1));
}

Answer 1

Вариант на CSS.

Вы создаёте "холст", который будет изначально иметь ширину в процентах относительно размера карточки.
Далее всё что внутри вы так же переводите размеры и позицию в проценты.

.card {
  display: block;
  min-width: 50px;
  width: 250px;
  max-width: 250px;
  height: 250px;
  background-color: #ccc;
  position: relative;
  /* для ресайза */
  overflow: hidden;
  resize: horizontal;
}

.image {
  display: block;
  width: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
}

.image::before {
  content: '';
  display: block;
  width: 100%;
  height: 0;
  padding-top: 100%;
  box-sizing: border-box;
}

.image-circle {
  display: block;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background-color: #3669d8;
  position: absolute;
  top: 10%;
  left: 10%;
}

.image-img-1 {
  display: block;
  width: 70%;
  height: auto;
  position: absolute;
  left: 0%;
  bottom: 0;
}

.image-img-2 {
  display: block;
  width: 80%;
  height: auto;
  position: absolute;
  right: 0;
  bottom: 0;
}

.image-img-3 {
  display: block;
  width: 50%;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 25%;
  transform: translateX(-50%);
}

<div class="card">
  <div class="image">
    <div class="image-circle"></div>
    <img class="image-img-1" src="//i.imgur.com/EyD0WAP.png" alt="">
    <img class="image-img-2" src="//i.imgur.com/3Dycd0J.png" alt="">
    <img class="image-img-3" src="//i.imgur.com/3ZuysaE.png" alt="">
  </div>
</div>

Вариант на SVG.

Холстом будет являться тег SVG, со своими размерами и положением элементов, а размер будет пропорционально сжиматься.

.card {
  display: block;
  min-width: 50px;
  width: 250px;
  max-width: 250px;
  height: 250px;
  background-color: #ccc;
  position: relative;
  /* для ресайза */
  overflow: hidden;
  resize: horizontal;
}

.image {
  display: block;
  width: 50%;
  position: absolute;
  right: 0;
  bottom: 0;
}

<div class="card">
  <svg class="image" viewbox="0 0 500 650" xmlns="http://www.w3.org/2000/svg">
    <circle cx="500" cy="500" r="400" fill="#3669d8"/>
    <image x="0" y="395" width="355" height="255" href="//i.imgur.com/EyD0WAP.png"/>
    <image x="57.5" y="0" width="442.5" height="650" href="//i.imgur.com/3Dycd0J.png"/>
    <image x="82.5" y="0" width="335" height="492.5" href="//i.imgur.com/3ZuysaE.png"/>
  </svg>
</div>

БЛОГ НА HUSL

Как сделать составные CSS изображения адаптивными?

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

Вариант на CSS.

Вариант на SVG.