Kevin Powell - Community•4w ago

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•4w ago

Combo of media queries and min() or clamp function

Dev_HKOP•4w 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•4w 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_HKOP•4w 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

Gaming

Programming

inverse width in relation of the viewport