Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
​
<head>
    <meta charset=utf-8>
    <title>JS Bin</title>
</head>
​
<!--
​
Every time you use this aspect ratio method just use this html structure:
​
<div class="wrapper">
    <div class="four-by-three aspect-ratio"></div>
    <div class="content">
        <h1>Content goes in here.</h1>
    </div>
</div>
​
-->
​
<body>
    <div class="wrapper main-box">
        <div class="four-by-three aspect-ratio"></div>
        <div class="content">
​
            <h1>Howdy!</h1>
            <p>This box has a 4:3 aspect ratio. Its width is 80% of the page width. Its height is three quarters of its width.</p>
​
            <div class="wrapper half">
                <div class="three-by-two aspect-ratio"></div>
                <div class="content">
                    <h1>3:2</h1>
                    <div>width: 50%</div>
                    <div>height: two thirds of width</div>
                </div>
            </div>
​
            <div class="wrapper half">
                <div class="sixteen-by-nine aspect-ratio"></div>
                <div class="content">
                    <h1>16:9</h1>
                    <div>width: 50%</div>
                    <div>height: nine sixteenths of width</div>
                </div>
            </div>
            
        </div>
    </div>
</body>
​
</html>
​
 
.wrapper {
    position: relative;
    width: 100%; /* <-- just a default, can be anything. */
}
​
   .three-by-two.aspect-ratio { padding-bottom: 66.666% }
  .four-by-three.aspect-ratio { padding-bottom: 75% }
.sixteen-by-nine.aspect-ratio { padding-bottom: 56.25% }
​
.content {
    position: absolute;
    top: 0;  bottom: 0;  left: 0;  right: 0;
    padding: 0 24px; /* Optional padding for content area */
}
​
​
/*
    The classes above have all of the aspect ratio stuff we need.
    They can be reused on any element.
    Below are some element-specific styles
*/
​
.half {
    width: 50%;
    float: left;
    background: beige;
}
​
​
/* Positioning for the main box */
.main-box {
    width: 80%;
    margin: 5% auto;
}
​
/* Styles for the content in the main box */
.main-box > .content {
    background: #ffe5e5;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers