dilsand-de Posts - Answer Overflow

dilsand-de

•Created by dilsand-de on 2/11/2024 in #front-end

Responsive Image positioning with CSS calc()


.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/GReYOpz

4 replies

KPCKevin Powell - Community

•Created by dilsand-de on 2/11/2024 in #front-end

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/GReYOpz

1 replies

Gaming

Programming