I have a complicated board composed of absolutely sized and positioned DIVs. I would like the resulting layout to be shown with the proper aspect ratio, as large as possible, on any screen dimensions, without clipping. I'm convinced I can do this without JS, but I haven't figured out how.
In researching, I found the @viewport attribute and it seemed that this, coupled with the layout done using PXs, would give me what I want. Of course, that's assuming I could find a @viewport setting that would set the appropriate dimensions. I guess that would be based on a @media query, perhaps something like this for a 16:9 target aspect ratio:
@viewport {
width: device-width;
height: calc(9 * device-width / 16);
}
@media (orientation: landscape) {
@viewport {
width: calc(16 * device-height / 9);
height: device-height;
}
}
However, this feature seems like it hasn't been ratified yet, and I was unable to get @viewport + PX to affect the screen at all in Chrome (42.0.2311.135 m). Plus, in subsection 5 of the document, it appears the VH, VW, etc. descriptors would be based on the initial rather than actual/modified viewport anyway (I'm not sure how that's useful, though).
Percentages didn't work, because they are relative to the associated dimension (left/width are relative to horizontal dimension, top/height to vertical), so the aspect ratio isn't maintained.
And absolute sizes (in, cm, etc.) wouldn't let me maximize the size on each screen.
The closest I've come was to use the newer VW unit for the layout, which maintains the aspect ratio, and scales with the screen. Unfortunately, when the window becomes wider than whatever aspect ratio I've used as a target (e.g. when there are bookmarks or other toolbars at the top of the browser), the board gets clipped. (Presumably VH would have the same issue for extremely tall portrait screens.)
<style>
.row1 {
top: 2vw;
height: 19vw;
border-top-width: 1vw;
}
.col1 {
left: 2vw;
width: 19vw;
border-left-width: 1vw;
}
</style>
<div class='col1 row1' id='box1'></div>
I haven't completed the complicated board layout, so I created this simple example to work with. (The target layout has different sized boxes pieced together.) If you size your browser window around the JSFIDDLE, so that it becomes much wider than tall, you'll see the clipping.
Is there a way to accomplish all these things (maximize board size, maintain aspect ratio, avoid clipping) without JS? (And if JS is required, do I have to modify every offset and dimension in the DOM, based on the viewport size, to do this?)
EDIT: I also see this object-fit: contain attribute, but this seems to only applicable to <video>, <object>, <img>, <input type=image>, <svg>, <svg:image> and <svg:video>. This would seem to be a great solution for this situation too, if it worked for other elements.
EDIT 2: It also seems that this can be accomplished with inline SVG: jsfiddle.net/nLdrwa73 (need more reputation points to post more than 2 links). However, creating a complicated layout is a bit more painful when you can't use CSS to align things using common selectors (class or id prefixes as used above), and instead have to explicitly supply position and dimensions in the HTML for each and every element. (I found Chrome actually heeds x and y in CSS but not width and height, but IE 11 ignores both.) Any other ideas?
