I am trying to adjust the aspect ratio of a responsive div to create a square shape with an offset. I want the height to be equal to the width plus the specified offset.
Here is an example of what I am attempting:
.div {
width: 100%;
aspect-ratio: 1 / (1 + 30px); // This part is causing me difficulty
}
In simpler terms, if the width is 300px, the height should be 330px. If the width is 600px, the height should be 630px.
Is it feasible to achieve this using CSS/SCSS? Or perhaps I am approaching the problem incorrectly?
I have experimented with combinations of calc() and var(), but unfortunately, they all result in invalid CSS rules.
For instance:
{
width: 100%;
aspect-ratio: 1 / (calc(calc(var(width) + 30px) / var(width))
}