1. Forum
  2. Usenet
  3. COMP.INFO.WWW.AUTHORING.S

  • Response div maintaining aspect and always visible

    From Andrew Poulos@21:1/5 to All on Mon Nov 9 09:30:21 2020
    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to Andrew Poulos on Wed Nov 11 18:02:49 2020
    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

    #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?

    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Evertjan.@21:1/5 to Andrew Poulos on Wed Nov 11 14:11:47 2020
    Andrew Poulos <ap_prog@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)

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From James Kirk@21:1/5 to Andrew Poulos on Wed Nov 11 12:32:10 2020
    In Message: <hPadnTpyM_QHETbCnZ2dnUU7-ffNnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@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𝕒𝕞𝕖𝕤 𝕂𝕚𝕣𝕜

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From Andrew Poulos@21:1/5 to James Kirk on Fri Nov 13 12:23:44 2020
    On 12/11/2020 4:32 am, James Kirk wrote:
    In Message: <hPadnTpyM_QHETbCnZ2dnUU7-ffNnZ2d@westnet.com.au>
    Andrew Poulos <ap_prog@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.

    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

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)