do clamps work on image width?

i tried using this on 2 images but it does not seem to ever reach a minimum width anyone has a clue on how clamp works when mixed with image sizes? width: clamp(0.5rem, 2vw +1rem ,5rem);
14 Replies
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Myndi
Myndi2y ago
I think it might be a problem with the calculation.
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Å Marlon G
Å Marlon G2y ago
Responsive content without media queries using CSS Clamp()
There's a useful function in CSS called CSS Clamp. It's better than using a width property because you can set up a minimum and maximum value, which are the clamps.
Aozen
Aozen2y ago
i am actually using the clamp on the image not the container i will try and get a code pen 1 moment but not sure if code pen gives images https://codepen.io/X-Ur-X/pen/VwdRppY
Aozen
Aozen2y ago
these are the 2 images i used not sure if it is possible for codepen
Aozen
Aozen2y ago
so main issue is when i make screen go very small it never reaches the smallest value ( i kinda want it to behave in that way reach lowest value at small screens and highest at big and prefer mid value generally)
Aozen
Aozen2y ago
this is as much info i can give ( just trying to improve and learn responsiveness properly)
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
Kevin Powell
Kevin Powell2y ago
clamp() will work on images, no problem. With the code you put above with the min() function... 3.13vw + 5rem - I played with that, it works too, but very slowly to the point where you can barely notice it. And unless you go pretty big, the 3.13vw + 5rem will be the smaller value.
Aozen
Aozen2y ago
mmm i kinda wanted it to reach the min value at 320 px cs smallest screen i wanted to exaggerate how small it reaches on purpose to see if the min value actually worked
13eck
13eck2y ago
Just wondering, but why use clamp() on images instead of max-width: 100%;? What's the use case to have the image size dependent on the browser window and not the image itself?
Kevin Powell
Kevin Powell2y ago
using min() will pick the smallest of the two values, not stop at the smallest. to stop at 320px, you'd want something like max(100%, 20rem). Then it'll grow/shrink with it's parent, but never be smaller than 20rem, because if 20rem is bigger than 100%, it wins. I will echo beck's question though... what's the use case?
Aozen
Aozen2y ago
honestly i do not know the use case i was just testing around and trying to make the image reach a minimum value at 320px then have an ideal width then reach a max of wtvr number to make images responsive i am learning web dev and i am watching almost all videos from your channel kevin 😅
Want results from more Discord servers?
Add your server