Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
-
@stop I don't see how flexbox could help. Right now I'm experimenting with a canvas 10k logical units wide and 10k/ratio logical units high, which will hopefully work very nicely on all but the largest screens. Now I just have to figure out how to position another div precisely on top of the canvas, and some centering.
-
@homo-lorens maybe it's possible with flexbox or grid, i've thought a bit about it but no solution yet.
I have a hacky solution though that should work in all browsers except IE.
https://codepen.io/hightechahole/... -
@homo-lorens and if you know the dimensions of the container beforehand (maybe with media queries) then i'd suggest this much less hacky version:
https://codepen.io/hightechahole/... -
@eval really cool, thank you. I didn't know you could put stuff in SVG and it would just work
-
@eval Unfortunately I don't know the size of my container as it'll be surrounded by various content blocks, so SVG it is.
-
Definitely possible. Aspect/ratio dropped recently - but this is t a great forum for coding questions. CSS discord: https://discord.gg/pFc6XmH make a fiddle and share what you’ve tried -
-
@eval Is it possible to get the SVG solution to inherit the parent's scaling? As it stands, if the container gets smaller the text inside it also shrinks.
-
@eval The document knows very little about its environment, I think we would have to divide by width in a calc() expression, but it's difficult to access width in calc() unless it's explicitly set to a literal.
-
@eval In any case my goal is to ensure that every user sees the exact same thing so actually the box shouldn't inherit the parent's scaling in this case.
-
@eval Inside the box is an unknown web form, and the users should see the same input and see each other's focus and pointer. The problem with resizing text is that on unusual screen resolutions it gets very small, but the greater problem with preserving font sizes is that the form won't look the same to everyone.
-
@eval With the current setup even if objects hang outside the box, they will hang out the same way for everyone, which is good enough for now.
-
@eval No, and it's way too inefficient to put online, not to mention how ugly it is. It was initially my scratchpad to learn react, typescript and all the nodejs tools, but then I had this idea.
-
@eval Basically I have to make sure that a given point maps to the same element (with some tolerance) for every user.
-
@eval I will use forms larger than the screen at some point, but for some things it's important that everything is visible.
Related Rants
How to vertically center in css..
Yeah no
[CSS]
I'd like to create a fixed aspect ratio box that remains centered in its parent such that two of its sides are always touching the parent. I know about the padding-top hack, the problem is that that won't make the box narrower if the parent isn't tall enough.
Is this even possible in CSS?
I like riddles and I don't expect a solution, but I'd like to know if it's even possible before I spend days researching.
question
css
aspect ratio