CODEWITHSUNDEEP
htmlcsscss-calc
Ajay Pillay
Ajay Pillay

Reputation: 162

calc() to create a canvas which scales in accordance to a device aspect ratio

I'm trying to create a canvas which is sized based on a ratio depending on the device. I have a final image I need to display with the following dimensions:

img {
    width: 100vw;
    height: 80vh;
}

This image is created from a canvas. I need to size this canvas in accordance to the expected ratio. I thought I could do the following by calculating the (inverse) aspect ratio and storing that as a variable:

:root {
    --device-ratio: calc(80vh / 100vw);
}
.someCanvas {
    width: 50vw;
    height: calc(var(--device-ratio) * 50vw);
}

In theory this was what I expected to need to do. But the problem is that with / and * in calc(), they require at least one of the values to be a number and specifically for /, the right value must be a number.

How should I be doing this without JavaScript? The ratio of the height to width of this image will be different based on each device, but that's okay. I'm looking to keep it consistent within the usage from a single device.

EDIT: I can calculate the ratio out in reference to the desired final dimensions, but that would mean I'd need to do that for every element's width and height. If I can somehow do it this way, I can declare widths as necessary and all I need to do is scale the height by --device-ratio. If not, I'll need to calculate the ratio out for every element manually. Certainly possible, just time consuming.

Upvotes: 0

Views: 329

Answers (0)

Related Questions