Skip to content

Instantly share code, notes, and snippets.

/Vertically-center-image-within-responsive-container.markdown

Created November 5, 2014 03:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save anonymous/2f01ccd79260e763489e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save anonymous/2f01ccd79260e763489e to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Nov 5, 2014.
    9 changes: 9 additions & 0 deletions Vertically-center-image-within-responsive-container.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Vertically center image within responsive container
    ---------------------------------------------------


    Forked from [Trevan Hetzel](http://codepen.io/trevanhetzel/)'s Pen [Vertically center image within responsive container](http://codepen.io/trevanhetzel/pen/DbEFp/).

    A [Pen](http://codepen.io/anon/pen/ADBsi) by [Captain Anonymous](http://codepen.io/anon) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/anon/pen/ADBsi/license).
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="responsive-container">
    <div class="img-container">
    <img src="http://placekitten.com/2640/400">
    </div>
    </div>
    43 changes: 43 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,43 @@
    @import "compass/css3";
    * {
    @include box-sizing(border-box);
    }

    body {
    padding: 1em;
    background: #3498db;
    }

    .responsive-container {
    width: 500px;
    position: relative;
    background-color: #eaebec;
    }

    .img-container:before {
    padding-top: 66.66667%;
    content: '';
    width: 0;
    height: 100%;
    background: none;

    display: inline-block;
    vertical-align: middle;
    }

    .img-container {
    text-align: center;
    background: pink;
    }

    img {

    display: inline-block;
    vertical-align: middle;
    max-height: 100%;
    max-width: 100%;

    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }