Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Aug 2012
    Posts
    121
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Set ratio for a div

    I have parent div with width is belong to the screen size.
    Within this div, I have a child div with width=60%.
    Code:
    <div style="width:100%">
           <div style="width:60%">
           </div>
    </div>
    Now I want the child div has a ratio 4/3 (width=4/3 height)
    Please help how I can do this? (do not use css). Thanks

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,903
    Thanks
    15
    Thanked 226 Times in 226 Posts
    You could try this.
    Code:
    <div id="sized" style="width:60%">
    </div>
    <script type="text/javascript">
    s=document.getElementById("sized");
    s.style.height=(s.offsetWidth*.75)+"px";
    </script>
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,041
    Thanks
    23
    Thanked 589 Times in 588 Posts
    You guys do know this is not responsive? The height does not change with the width.
    Evolution - The non-random survival of random variants.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,032
    Thanks
    75
    Thanked 4,325 Times in 4,291 Posts
    Sunfighter: By that you mean that if the user changes the window size, then the height will remain the same even though the width changes, right?

    But that's easy to fix:
    Code:
    <!doctype html>
    <html>
    <head>
    <style type="text/css">
    #contents {
        position: relative;
        width: 100%;
        background-color: pink;
    }
    #sized {
        position: relative;
        width: 60%;
        background-color: yellow;
    }
    </style>
    </head>
    <body>
    <div id="contents">
        <div id="sized" style="width:60%">
            <h2>This is div with id 'sized'</h2>
        </div>
    </div>
    
    <script type="text/javascript">
    function adjustWidth() 
    {
        var s=document.getElementById("sized");
        s.style.height=(s.offsetWidth*.75)+"px";
    };
    document.body.onresize = adjustWidth;
    adjustWidth();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,041
    Thanks
    23
    Thanked 589 Times in 588 Posts
    Nice.
    Evolution - The non-random survival of random variants.

  • #6
    Senior Coder
    Join Date
    Aug 2006
    Posts
    1,208
    Thanks
    7
    Thanked 268 Times in 267 Posts
    Quote Originally Posted by docco View Post
    Please help how I can do this? (do not use css). Thanks
    I'm not sure why the OP put this restriction on the solution, but as a matter of technical curiosity, does setting style attributes via JS qualify as "using css?". IOW, which came first, the DOM description of styles, or the CSS style sheet definitions? I always assumed the latter (ie, both defined under the scope of "create CSS"), but perhaps I'm wrong?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •