This calculator creates CSS clamp() formulas based on your actual image and how you want it to scale.

Start With Your Image

Enter your image’s actual width (e.g., 1200px). This is the size of your image file—you can check this by opening the image in any photo viewer or looking at the file properties.

Choose When It Shows Full Size

Next, decide at what viewport width your image should display at its full size. For a 1200px image, you might set this to 1200px so it shows at full size on larger screens, or you might set it higher (like 1920px) if you want it to fill more of the screen on very large displays.

The “Never exceed image’s actual size” option (checked by default) ensures your image never scales up beyond its original dimensions, preventing pixelation and blurriness.
Set Mobile Behavior

Choose how your image should scale on smaller screens:

• Fill Container (Default): Your image will scale to fill 90% of the available width, leaving some padding on mobile devices. This is the most common approach and works great for most images.
• Percentage of Container: Want more control? Set a specific percentage like 80% or 95%. Perfect if you have specific spacing requirements or want images to be smaller/larger on mobile.
• Minimum Fixed Size: Set an absolute minimum width (like 300px) that your image should never go below. Useful for images that become unreadable if they get too small, like infographics or images with text.

The Generated Formula

The calculator creates a CSS clamp() formula with three values:

• Minimum – The smallest your image will ever be (calculated based on your mobile behavior choice)
• Preferred – A flexible value that scales with the viewport (like 90vw or a calculated vw + px)
• Maximum – Your image’s full size

The browser automatically calculates the middle value and ensures the image never goes below the minimum or above the maximum. This creates smooth, continuous scaling without any breakpoints or media queries.

Why This Approach Works

Traditional responsive design requires multiple breakpoints with media queries, which means your image might jump from 300px to 600px to 900px at specific screen sizes. With CSS clamp(), the image scales smoothly at every single viewport width—even ones you haven’t designed for.

The result? Your image looks perfect on a 375px iPhone, a 768px iPad, a 1366px laptop, and everything in between, all with a single line of CSS.

Using Your Code

Copy the generated CSS formula and either:

• Add it inline to your image tag (shown in the HTML example)
• Add it to a CSS class in your stylesheet
• Use it in your CSS-in-JS solution

*** Always pair it with height: auto to maintain the image’s aspect ratio and prevent distortion.