How to use CSS clamp() to set smaller image on desktop and bigger image on mobile?

[vikramvi]

Dear All,

I’ve requirement to show small image on desktop ( 25% width ) and bigger image on mobile ( 90% width ), how to do it with CSS clamp() .

I tried it with media query but read that it’s better to use modern css function like clamp().

Thanks & Regards,
Vikram

[eucalyptus]

I am unsure if clamp() will work with the built in tests on the projects, since it asks for specific sizes. It will resize content based on the viewport size but you might not get the specific values the tests want.

But clamp() accepts three values, a minimum, preferred size, and maximum
Something like this,

img {
	width: clamp();
}