Img resize css contain ratio responsive

by Plippie Plop

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css">
<div id="background-placeholder" class="responsive-img"></div>

<div id="page">
    
    <div id="top-bar"> 
        <button class="btn" 
        data-target="#menu-left"  
        data-action="slide-menu"
        data-interaction="slide-to-right"
        >Menu</button>
    </div>
    <div id="page-content">
   
    <h3> some page text</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet tincidunt elit, sed viverra lectus mollis quis. Sed convallis gravida auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer mollis laoreet viverra. In hac habitasse platea dictumst. Quisque at nulla porttitor, vehicula neque sed, malesuada urna. Fusce lobortis enim auctor faucibus tempus. Praesent vehicula urna quis dui ultricies, a fermentum ante suscipit. Vestibulum sodales leo vel ante euismod bibendum eu ut arcu. Ut rhoncus ligula mattis metus varius mollis. Pellentesque mattis placerat neque non dictum. Morbi posuere enim at tellus gravida pulvinar.</p>
        <p>Aenean lobortis, metus vitae interdum sodales, quam tortor varius felis, sit amet adipiscing sem nibh sit amet mauris. Ut feugiat vitae tellus eu sodales. Suspendisse quis dolor in orci faucibus tempor in a orci. Nunc vestibulum lacinia nisl, vitae vulputate magna ornare ut. Morbi sit amet tellus sed arcu vestibulum tincidunt cursus vitae dui. Aliquam felis velit, tempus et nunc at, volutpat dignissim tellus. Integer lacinia vitae est at vehicula. Integer eleifend vel mi et ultricies.</p>
    
    </div><!-- / page content -->
    
</div> <!-- /main page -->

CSS

/* resets */
body{
    margin:0;
    padding:0;
    font-size:14px;
    font-family:calibri, 'San Serif';
    font-weight:normal;
    overflow-x: hidden;
    overflow-y: scroll;
}
div{display:block;}
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary { display: block; -webkit-backface-visibility: hidden; }




/* template */


.responsive-img{
    display:block;
    position:absolute;
    z-index:-1;
     width:100%;
     height:100%;   
    
    background-position:top center;
    background-size:100% 100%; 
    background-repeat:no-repeat;
    background-image:url(http://stdemo3.archifact.nl/shift-tasking/img/projects/PEPAPP_splash_01.jpg);    
}


#page{
    border:1px solid green;
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    translate3d(0,0,0);
    
}

#top-bar{
    position:absolute;
    z-index:100;
    left:0;
    top:0;
    height:40px;
    line-height:40px;
    right:0;
    background:rgba(0,0,0,.4);
}


#page-content{
    position:relative;
    top:40px;
}


.slide-menu.slide-to-right{
    transform: translate3d(-100%, 0, 0);
}

JavaScript

//### sliding left menu
$('#top-bar').on('click','.btn', function(e){
   
    e.preventDefault();
    
    var $this = $(this),
        eData = $this.data()
    ;    
       
    // if a sliding menu
    if( eData.interaction === 'slide-menu' ){
         slideMmenu(eData);
    }
    
    
    
});



//### Sliding menu function
function slideMmenu(eData){
  
    // get menu target:
    var $target = $(eData.target),
        action = eData.action,
        interaction = eData.interaction
        ;
    
    // is it open or closed:
    if( $target.hasClass('open') ){
        $target.removeClass('open ' + interaction);
        $('#page').removeClass('open ' +interaction);
    } else {
         $target.addClass('open ' + interaction);
        $('#page').addClass('open ' +interaction);
    }
}