Skip to content

Instantly share code, notes, and snippets.

@lanceosborne

lanceosborne/fluid-ratio.css

Forked from alessandroraffa/fluid-ratio.css
Last active August 29, 2015 14:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save lanceosborne/7dea4f06ee10e699b23c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save lanceosborne/7dea4f06ee10e699b23c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @alessandroraffa alessandroraffa revised this gist Oct 24, 2013. 1 changed file with 7 additions and 3 deletions.
    10 changes: 7 additions & 3 deletions fluid-ratio.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,6 @@
    /*!
    * fluid-ratio.css
    * Version: 0.1.0
    * Version: 0.1.1
    *
    * @author Alessandro Raffa <contact@alessandroraffa.eu>
    *
    @@ -14,8 +14,8 @@
    overflow:hidden;
    }

    .ratio-16-9{
    padding-bottom: 56.25%; /* value for 16:9 aspect ratio */
    .ratio-1-1{
    padding-bottom: 100%; /* value for 1:1 aspect ratio */
    }

    .ratio-4-3{
    @@ -26,6 +26,10 @@
    padding-bottom: 66.6666667%; /* value for 3:2 aspect ratio */
    }

    .ratio-16-9{
    padding-bottom: 56.25%; /* value for 16:9 aspect ratio */
    }

    .ratio-3-1{
    padding-bottom: 33.3333333%; /* value for 3:1 aspect ratio */
    }
  2. @alessandroraffa alessandroraffa created this gist Oct 24, 2013.
    49 changes: 49 additions & 0 deletions fluid-ratio.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,49 @@
    /*!
    * fluid-ratio.css
    * Version: 0.1.0
    *
    * @author Alessandro Raffa <contact@alessandroraffa.eu>
    *
    */

    .fluid-ratio{
    position:relative;
    margin:0;
    padding:0;
    height:0;
    overflow:hidden;
    }

    .ratio-16-9{
    padding-bottom: 56.25%; /* value for 16:9 aspect ratio */
    }

    .ratio-4-3{
    padding-bottom: 75%; /* value for 4:3 aspect ratio */
    }

    .ratio-3-2{
    padding-bottom: 66.6666667%; /* value for 3:2 aspect ratio */
    }

    .ratio-3-1{
    padding-bottom: 33.3333333%; /* value for 3:1 aspect ratio */
    }

    .fluid-ratio > :first-child{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin:0;
    }

    /************
    Usage
    <div class="fluid-ratio ratio-16-9">
    <div>This element has 16:9 aspect ratio width fluid width</div>
    </div>
    ************/