Привет. Есть изображение шириной 666px и высотой 582px, внутри него пустой объект внутри которого ещё два пустых объекта. Их контейнер растягивается по высоте и ширине на 100%. То есть всегда равен размерам картинки. Два пустых объекта в нём имеют css свойства дающие им размеры, цвет, округлость и позиционирование.
&__circles-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
z-index: -1;
}
&__circle {
position: absolute;
background-color: #1f1f1f;
border-radius: 50%;
&:nth-child(1) {
width: 321px;
height: 321px;
left: -68px;
bottom: -51px;
}
&:nth-child(2) {
width: 486px;
height: 486px;
top: -29px;
right: -139px;
}
}
Так вот, картинка уменьшается в размерах когда ширина браузера становится меньше ширины картинки. И нужно, чтобы эти два кругляшка то же уменьшались эквивалентно картинке. Я пробовал разные формулы прописать (calc) и ширине и высоте но ни как не получалось. Что посоветуете?
Простой
Простой
