bigViewCSS

by ihope

HTML

<div id='container'>
    <div id='viewer'>gfg gfdgdfg dfgdf gdfg dfgdf g df gdfgdfgsgf gsdf</div>
    <div id='images-slider'>gfg gfdgdfg dfgdf gdfg dfgdf g df gdfgdfgsgf gsdf f</div>
</div>

CSS

body ,html{margin:0px;height : 98%; margin: auto;}
#container {
    margin: auto;
    width : 100%;
    background:#0f0;
   height : 100%;
    
}#viewer {
    margin:10px auto;
    background:#f00;
    width : auto ;
    float:left;
}#images-slider {
    margin:10px auto;
    background:#00f;
    width :!important auto  ;
    float:left;!important
}

JavaScript

//$target = $('#target');
//target = $target[0];
//cs = getComputedStyle(target);
$.fn.fit = function() {
    $that = this;
    that = $that[0];
    $parent = $that.parent();
    
    $parent.height($(window).height());
    
    $that.height( $parent.height() - 20)
    
    nW = that.naturalWidth;
    nH = that.naturalHeight; 
    nHW = nH/nW;
    
     
    $that.height($that.width() * nHW )
    
}; 
//$target.fit();
//$target.on('click',function(){$(this).fit()})
//cH =cs.height