inverse width in relation of the viewport

i want to grow an image based on the vw the bigger the screen, the smaller the icons until they reach a certain vw (100vw) and if the screen is smaller (1440px & lower) the img width increases
4 Replies
clevermissfox
clevermissfox3w ago
Combo of media queries and min() or clamp function
Dev_HK
Dev_HKOP3w ago
how
.element {
/* Basic inverse relationship */
width: calc(800px / (100vw/100%));


/* With bounds */
width: clamp(200px, calc(800px / (100vw/100%)), 600px);
}
.element {
/* Basic inverse relationship */
width: calc(800px / (100vw/100%));


/* With bounds */
width: clamp(200px, calc(800px / (100vw/100%)), 600px);
}
this is from claude
Jochem
Jochem3w ago
you'll learn jack-shit if you ask claude... look up media queries and clamp on mdn and read the articles, then play around with them
Dev_HK
Dev_HKOP3w ago
btw tell me what you think about this https://codesandbox.io/p/sandbox/fnlkxd if you're too lazy to check the sandbox; here's the code https://pastecord.com/yminetomos.typescript
Want results from more Discord servers?
Add your server