4 ms·
Today, you can use aspect-ratio (https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...).
by amenghra 4y ago
Today, you can use aspect-ratio (https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-rati...).
I had to once do something similar and I ran into 4 cases (which can be collapsed into 2 cases): add vertical borders if the window is very wide or a little narrow. Add horizontal borders if the window is a little wide or very narrow.
- zamadatix 4y agoPer the above I ran into issues with Canvas and aspect-ratio, demo here https://jsfiddle.net/6m0v9n3d/1/ https://jsfiddle.net/6m0v9n3d/1/ (try vertically smashing it like it was being played on an ultrawide and it won't hold the 16:9 aspect ratio anymore). Trying to size vertically results in the opposite issue. Trying not to size it to the viewport or parent results in the canvas staying the default size.
- amenghra 4y agoYou are setting `width: 100vw;` which is why it doesn't work. Try something like this: https://jsfiddle.net/pgaz7cmx/ https://jsfiddle.net/pgaz7cmx/, which sets both, width and max-width.
- zamadatix 4y agoHuzzah! I don't think I ever would have thought to set both width and max-width (to > 100 vw no less!). Makes sense now that I see it though, thanks!
- amenghra 4y agomax-width gets set to vh, not vw. I do dislike this solution because the ratio is encoded twice. I’m sure there are other ways to achieve the same, some are perhaps more elegant?