Response div maintaining aspect and always visible

Andrew Poulos

unread,

Nov 8, 2020, 5:30:30 PM11/8/20

to

A need a div to be responsive, to maintain its aspect ratio and to
always be completely visible within the viewport.

A search turned up CSS like this

#wrap {
width: 100%;
display: inline-block;
position: relative;
}
#wrap::after {
padding-top: 56.25%; /* 16:9 ratio */
display: block;
content: '';
}
#editor {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}

with this HTML

<div id="wrap">
<div id="editor">
<p>Hello World!</p>
</div>
</div>

Alas it only works so long as ratio of the browser window is bigger
than, in this case, 16:9.

That is, when the browser window isn't tall enough I get scrollbars.
Ideally wrap's height (and width) should shrink to so that wrap never
extends beyond the viewport. How is this possible in CSS?

Andrew Poulos

Andrew Poulos

unread,

Nov 11, 2020, 2:02:57 AM11/11/20

to

I solved it but I had to write some JavaScript to do it. If one could
use CSS variables within @media eg

@media screen and (max-width: var(--num) { }

then it may have been easier.

Andrew Poulos

Evertjan.

unread,

Nov 11, 2020, 8:12:23 AM11/11/20

to

Andrew Poulos <ap_...@hotmail.com> wrote on 11 Nov 2020 in
comp.infosystems.www.authoring.stylesheets:

> I solved it but I had to write some JavaScript to do it. If one could
> use CSS variables within @media eg
>
> @media screen and (max-width: var(--num) { }
>
> then it may have been easier.

That it can't work, makes sense, as, while you can set --aValue e.g. to
:root, that is, the <html> element, and from there be inherited to other
elements, a media query, not being an element, can't inherit from <html>, so
it can't work.

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

James Kirk

unread,

Nov 11, 2020, 12:32:15 PM11/11/20

to

In Message: <hPadnTpyM_QHETbC...@westnet.com.au>

Andrew Poulos <ap_...@hotmail.com> wrote:

> On 9/11/2020 9:30 am, Andrew Poulos wrote:

>> A need a div to be responsive, to maintain its aspect ratio and to
>> always be completely visible within the viewport.

>> A search turned up CSS like this

[snip]

>> with this HTML

[snip]

>> Alas it only works so long as ratio of the browser window is
>> bigger than, in this case, 16:9.

>> That is, when the browser window isn't tall enough I get
>> scrollbars. Ideally wrap's height (and width) should shrink to so
>> that wrap never extends beyond the viewport. How is this possible
>> in CSS?

> I solved it but I had to write some JavaScript to do it. If one
> could use CSS variables within @media eg

> @media screen and (max-width: var(--num) { }

> then it may have been easier.

https://codepen.io/noneyainvalid/full/WNxYXZo

perhaps with @media (min-aspect-ratio: 16/9) to calculate the ratio
based from the height.

Default to calculate the ratio based from the width.

--
J𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

Andrew Poulos

unread,

Nov 12, 2020, 8:23:53 PM11/12/20

to

That's sort of what I ended up doing. I needed to divide the width by
the height but calc requires a number on the right-hand side of the
solidus so I used js to write it and then to add it to the page.

Andrew Poulos