БЛОГ НА HUSL


Адаптивные элементы декора для фото

Автор вопроса: Alma410

Пытаюсь реализовать задачу по добавление элементов декора для фото (два круга за фото). Удалось расположить их правильно, но они абсолютно не адаптивные. При уменьшении экрана пропорционально уменьшается только фото. А элементы декора абсолютно не управляемы.
Как разрешить данную проблему с элементами декора чтобы при уменьшении экрана они пропорционально уменьшались с фото.

введите сюда описание изображения

.advertisement__crisper {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
}
 .crisper__content-row {
     display: flex;
     width: 100%;
     align-items: center;
     justify-content: space-between;
     row-gap: toRem(20);
     column-gap: toRem(40);
}
 .content-row__box-items {
     flex: 0 0 67%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
}
 .content-row__box-items::before {
     position: absolute;
     content: "";
     aspect-ratio: 1;
     max-width: 694px;
     min-height: 694px;
     border-radius: 100%;
     opacity: 0.2;
     background: var(--decodeSmallCardAbout);
     z-index: -1;
     padding: 0 170px;
}
 .content-row__box-items::after {
     position: absolute;
     content: "";
     max-width: 862px;
     min-height: 862px;
     aspect-ratio: 1;
     border-radius: 100%;
     opacity: 0.1;
     background: red;
     z-index: 2;
     padding: 0 180px;
}
 .content-row__inner-cell {
     position: relative;
     display: block;
     aspect-ratio: 1;
     max-width: toRem(549);
     z-index: 3;
     border-radius: 100%;
}
 .content-row__pic-circle {
     overflow: hidden;
     border-radius: 100%;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
}
 .content-row__desc-textbox {
     flex: 0 0 27%;
}
 .content-row__title-our {
     color: #311f09;
     font-family: var(--fonFamilyTinos);
     font-size: 80px;
     font-size: toRem(80);
     line-height: 1.1;
}
 .content-row__word {
     color: #ff8a00;
     font-family: var(--fonFamilyTinos);
     font-size: toRem(80);
     font-weight: 700;
     line-height: 1.1;
}
<div class="crisper__content-row content-row">
  <div class="content-row__box-items">
    <div class="content-row__inner-cell">
      <img src="https://i.imgur.com/C8hS4ru.png" alt="Order" class="content-row__pic-circle" width="549" height="549">
    </div>
  </div>
  <div class="content-row__desc-textbox">
    <h2 class="content-row__title-our"><strong class="content-row__word">Our</strong> restautant</h2>
    <div class="content-row__box-paragraph">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

SCSS: 

//!BEM-Block
.advertisement {
  // .advertisement__crisper
  &__crisper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }
}

//!BEM-Block
.crisper {
  // .crisper__content-row
  &__content-row {
    display: flex;
    width: 100%;
    // flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    row-gap: toRem(20);
    column-gap: toRem(40);
  }
}

//!BEM-Block
.content-row {
  // .content-row__box-items
  &__box-items {
    flex: 0 0 67%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    &::before {
      position: absolute;
      content: "";
      aspect-ratio: 694 / 694;
      max-width: 694px;
      min-height: 694px;
      border-radius: 100%;
      opacity: 0.2;
      background: var(--decodeSmallCardAbout);
      z-index: -1;
      padding: 0 170px;
    }
    &::after {
      position: absolute;
      content: "";
      max-width: 862px;
      min-height: 862px;
      aspect-ratio: 862 / 862;
      border-radius: 100%;
      opacity: 0.1;
      background: red;
      z-index: 2;
      padding: 0 180px;
    }
  }
  // .content-row__inner-cell
  &__inner-cell {
    position: relative;
    display: block;
    aspect-ratio: 549 / 549;
    max-width: toRem(549);
    z-index: 3;
    border-radius: 100%;
  }
  // .content-row__pic-circle
  &__pic-circle {
    overflow: hidden;
    border-radius: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  // .content-row__desc-textbox
  &__desc-textbox {
    flex: 0 0 27%;
  }
  // .content-row__title-our
  &__title-our {
    color: #311f09;
    font-family: var(--fonFamilyTinos);
    font-size: 80px;
    font-size: toRem(80);
    line-height: 1.1;
  }
  // .content-row__word
  &__word {
    color: #ff8a00;
    font-family: var(--fonFamilyTinos);
    font-size: toRem(80);
    font-weight: 700;
    line-height: 1.1;
  }
}


Источник

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

Автор решения: De.Minov

Слишком много всего и лишнего для реализации этих кругов.

В идеале это делать через box-shadow:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden auto;
  margin: 0;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 20px rgba(150,150,150, .2),
    0 0 0 40px rgba(150,150,150, .2);
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
<div class="image">
  <img src="https://i.imgur.com/C8hS4ru.png" />
</div>

Жаль только, что box-shadow не поддерживает значения в процентах.
Это усугубляет решение, если требуется прям автоматический адаптив относительно изображения.

Что ж, используем псевдоэлементы и тут есть даже два варианта:

1. width и height больше родителя:

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden auto;
  margin: 0;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
}

.image::before,
.image::after {
  content: '';
  display: block;
  border-radius: inherit;
  background-color: rgba(150,150,150, .2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.image::before {
  width: 120%;
  height: 120%;
}

.image::after {
  width: 140%;
  height: 140%;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
<div class="image">
  <img src="https://i.imgur.com/C8hS4ru.png" />
</div>

2. scale()

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden auto;
  margin: 0;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
}

.image::before,
.image::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background-color: rgba(150,150,150, .2);
  position: absolute;
  left: 0;
  top: 0;
}

.image::before {
  transform: scale(1.2);
}

.image::after {
  transform: scale(1.4);
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
<div class="image">
  <img src="https://i.imgur.com/C8hS4ru.png" />
</div>

Оба этих варианта будут поддерживать динамическое изменение "декора" относительно изображения.
Ниже демка, где можно "подёргать" размер изображения:

const img = document.querySelector('.image');

document.querySelector('input').addEventListener('input', (event) => {
  img.style.width = img.style.height = `${300 * event.target.value}px`;
});
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden auto;
  margin: 0;
}

.image {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: visible;
  position: relative;
}

.image::before,
.image::after {
  content: '';
  display: block;
  border-radius: inherit;
  background-color: rgba(150,150,150, .2);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.image::before {
  width: 120%;
  height: 120%;
}

.image::after {
  width: 140%;
  height: 140%;
}

.image img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

input {
  display: block;
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  z-index: 1;
}
<div class="image">
  <img src="https://i.imgur.com/C8hS4ru.png" />
</div>

<input type="range" min=".2" value="1" max="1.25" step=".05">

→ Ссылка

licensed under cc by-sa 3.0 with attribution.