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);

Myndi•12/7/22, 5:18 AM

I think it might be a problem with the calculation.

DDeleted User What if you set clamp on img not container. Some google time and I saw some exam...

Å Marlon G•12/7/22, 1:59 PM

Yep!

https://raybo.org/posts/2021-02-28-CSS%20Clamp/

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.

AozenOP•12/8/22, 11:10 AM

i am actually using the clamp on the image not the container

AozenOP•12/8/22, 11:10 AM

i will try and get a code pen 1 moment

AozenOP•12/8/22, 11:10 AM

but not sure if code pen gives images

AozenOP•12/8/22, 11:12 AM

https://codepen.io/X-Ur-X/pen/VwdRppY

AozenOP•12/8/22, 11:13 AM

these are the 2 images i used not sure if it is possible for codepen

loewe-lineart.svg75.37KB

images.jfif6.89KB

AozenOP•12/8/22, 11:14 AM

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)

AozenOP•12/8/22, 11:15 AM

this is as much info i can give ( just trying to improve and learn responsiveness properly)

AAozen so main issue is when i make screen go very small it never reaches the smallest ...

Kevin Powell•12/8/22, 3:08 PM

clamp() will work on images, no problem.

With the code you put above with the function...

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 will be the smaller value.

KKevin Powell clamp() will work on images, no problem. With the code you put above with the `...

AozenOP•12/8/22, 7:52 PM

mmm i kinda wanted it to reach the min value at 320 px cs smallest screen

AozenOP•12/8/22, 7:53 PM

i wanted to exaggerate how small it reaches on purpose to see if the min value actually worked

13eck•12/8/22, 8:29 PM

Just wondering, but why use on images instead of ? What's the use case to have the image size dependent on the browser window and not the image itself?

AAozen mmm i kinda wanted it to reach the min value at 320 px cs smallest screen

Kevin Powell•12/8/22, 8:57 PM

using will pick the smallest of the two values, not stop at the smallest.

to stop at 320px, you'd want something like . 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?

KKevin Powell using `min()` will pick the smallest of the two values, not stop at the smallest...

AozenOP•12/8/22, 9:03 PM

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

AozenOP•12/8/22, 9:03 PM

i am learning web dev and i am watching almost all videos from your channel kevin