Locking the Aspect Ratio of a Container

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Don G
    #1

    Locking the Aspect Ratio of a Container

    Is it possible to lock the aspect ratio of container using CSS?

    For example, have a <div> that is resized according to the size of the
    browser window, but remains square, regardless of it's size.

    In the sample code that follows, I have set the width and height of the
    <div> to be 75%, however the height of the height does not vary with the
    size of the content window. If it did vary, it probably wouldn't give
    the desired results because it would probably be 75% of height of the
    window.

    So, is it possible to tie the height of a container to the width of the
    window?

    Thank you,

    Don

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>
    Image Resize Test
    </title>
    <style type="text/css">
    * {
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    }

    ..content {
    margin: 12.5%;
    width: 75%;
    min-width: 100px;
    height: 75%;
    min-height: 100px;
    border: 1px solid blue;
    }
    </style>
    </head>
    <body>
    <div class="content" >
    text
    </div>
    </body>
    </html>
    Tags: None
    • Christoph Paeper
      #2
      Re: Locking the Aspect Ratio of a Container

      *Don G* <mail4dag@yahoo .com>:[color=blue]
      >
      > So, is it possible to tie the height of a container to the width of the
      > window?[/color]

      No, not with CSS (including current drats of level three AFAIK). It's
      possible with a scripting language and the DOM, though. Some browsers
      (i.e. IE) support a proprietary way to access the DOM from within CSS
      ('expression'), when scripting is enabled.

      By the way, the technical correct term is "box" not "container" and by
      "window" you mean "viewport".

      --
      "If you never fall, you dance in constant fear of falling."
      Suzanne Farrell

        Comment

        • Don G
          #3
          Re: Locking the Aspect Ratio of a Container

          > No, not with CSS (including current drats of level three AFAIK).

          Bummer.
          [color=blue]
          > It's possible with a scripting language and the DOM, though. Some browsers
          > (i.e. IE) support a proprietary way to access the DOM from within CSS
          > ('expression'), when scripting is enabled.[/color]

          Hmm, no, I don't think it will be worth it for what I am doing.
          [color=blue]
          > By the way, the technical correct term is "box" not "container" and by
          > "window" you mean "viewport".[/color]

          Ah, thank you. My web publishing technical jargon is lacking.

          Thank you for your reply,

          Don

            Comment

            • Don G
              #4
              Re: Locking the Aspect Ratio of a Container

              So, should 'height: 75%' actually do anything? I checked the sample
              code I posted before in FireFox, IE, and Opera, and it didn't do
              anything. Does the height attribute only work with a fixed dimension?

              Thanks,

              Don

                Comment

                • Christoph Paeper
                  #5
                  Re: Locking the Aspect Ratio of a Container

                  *Don G* <mail4dag@yahoo .com>:[color=blue]
                  >
                  > So, should 'height: 75%' actually do anything?[/color]

                  Sure.
                  [color=blue]
                  > I checked the sample code (...) and it didn't do anything.[/color]

                  Sure.
                  [color=blue]
                  > Does the height attribute only work with a fixed dimension?[/color]

                  No, but if percentual there has to be some calculatable height it can
                  refer to. The boxes of 'html' and 'body' (usually) grow with the contents,
                  so you have a circular dependency here. The viewport OTOH has usually a
                  fixed size. You can set 'html' and 'body' to its height with:

                  html, body {height: 100%}

                  See also <http://www.w3.org/TR/CSS21/visudet.html>, which has:

                  : A percentage height on the root element is relative to the viewport.

                  That sentence is not in CSS 2.0.

                  The terminology lection this time: by "attribute" you mean "property".

                  --
                  "Some people say I am a terrible person,
                  I'm not, I have the heart of a young boy,
                  in a jar, on my desk."
                  Stephen King

                    Comment

                    • Don G
                      #6
                      Re: Locking the Aspect Ratio of a Container

                      > No, but if percentual there has to be some calculatable height it can[color=blue]
                      > refer to. ... You can set 'html' and 'body' to its height with:
                      >
                      > html, body {height: 100%}[/color]

                      I thought this might be the case, and I tried it earlier with no
                      success. I just tried it again, and it worked, so I must have made a
                      type before.
                      [color=blue]
                      > The terminology lection this time: by "attribute" you mean "property".[/color]

                      I don't suppose you have a link to a glossary for me to look at?

                      Thanks again,

                      Don

                        Comment

                        • theo
                          #7
                          Re: Locking the Aspect Ratio of a Container


                          "Don G" <mail4dag@yahoo .com> wrote in message
                          news:4231fc4f$1 _2@newsfeed.slu rp.net...[color=blue][color=green]
                          > > No, but if percentual there has to be some calculatable height it can
                          > > refer to. ... You can set 'html' and 'body' to its height with:
                          > >
                          > > html, body {height: 100%}[/color]
                          >
                          > I thought this might be the case, and I tried it earlier with no
                          > success. I just tried it again, and it worked, so I must have made a
                          > type before.
                          >[color=green]
                          > > The terminology lection this time: by "attribute" you mean "property".[/color]
                          >
                          > I don't suppose you have a link to a glossary for me to look at?
                          >
                          > Thanks again,
                          >
                          > Don[/color]

                          I've never used percentages on heights, due to the need for liquidity. Table
                          rows+columns always stayed uniform height, while rows of divs do not.
                          Someone said to put each row of divs into a container div, at 100% width.
                          I'm having same or similar scenero problems, things wrapping and throwing
                          the whole page off, in the post titled "3column problem liquidity wraps",
                          above.

                          Good Luck
                          M.E.




                            Comment

                            • Rick Cook
                              #8
                              Re: Locking the Aspect Ratio of a Container

                              theo wrote:[color=blue]
                              > "Don G" <mail4dag@yahoo .com> wrote in message
                              > news:4231fc4f$1 _2@newsfeed.slu rp.net...
                              >[color=green][color=darkred]
                              >>>No, but if percentual there has to be some calculatable height it can
                              >>>refer to. ... You can set 'html' and 'body' to its height with:
                              >>>
                              >>> html, body {height: 100%}[/color]
                              >>
                              >>I thought this might be the case, and I tried it earlier with no
                              >>success. I just tried it again, and it worked, so I must have made a
                              >>type before.
                              >>
                              >>[color=darkred]
                              >>>The terminology lection this time: by "attribute" you mean "property".[/color]
                              >>
                              >>I don't suppose you have a link to a glossary for me to look at?
                              >>
                              >>Thanks again,
                              >>
                              >>Don[/color]
                              >
                              >
                              > I've never used percentages on heights, due to the need for liquidity. Table
                              > rows+columns always stayed uniform height, while rows of divs do not.
                              > Someone said to put each row of divs into a container div, at 100% width.
                              > I'm having same or similar scenero problems, things wrapping and throwing
                              > the whole page off, in the post titled "3column problem liquidity wraps",
                              > above.
                              >
                              > Good Luck
                              > M.E.
                              >
                              >
                              >
                              >[/color]
                              How does using percentages on heights diminish liquidity? I'd think it
                              would improve it, if anything.

                              --RC

                                Comment

                                Previous template Next
                                Working...