Responsive Image positioning with CSS calc()
If possible can anyone please explain me the below part of the code, when resizing the window this test preview image remains perfectly responsive even it's positioned absolute.it happens with this calc() function calculation. That's what I couldn't understand.
.section-types .type-info .type-image-wrapper {
position: absolute;
left: calc(100 * 48%/564);
width: calc(100 * 280%/564);
top: calc(100 * 84%/535);
border-radius: 35px;
overflow: hidden;
}
for better understanding I've attached the codepen link for this
https://codepen.io/d-shan/pen/GReYOpz0 Replies