JSFiddle - React, Tailwind, and code Playground

CSS - Picture background zoom ,see full image but resized . Use this for Pictures in PageEditor. Put in a flexible width column.

by Ben Clayton

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<div class='container'>
    <div class='column one'>
        <div class='coltitle'>Left Column is x% width</div><br/>  
          <div class="dbpicture landscape">
              <img src="http://www.sourcebmx.com/images/spacer.gif" style="background-image:url('http://vanilla.infxsolutions.com/dyn/_pictures/landscape.png');" data-aspectratio='0.6667' />
          </div>
          <div class="flexbutton">
              <button>Revert to Flex</button>
          </div>
          <div class="dbpicture-title">
              Landscape orig
          </div>
          <div class="dbpicture portrait">
              <img src="http://www.sourcebmx.com/images/spacer.gif" style="background-image:url('http://vanilla.infxsolutions.com/dyn/_pictures/portrait.png');" data-aspectratio='1.5' />
          </div>
          <div class="flexbutton">
              <button>Revert to Flex</button>
          </div>
 
          <div class="dbpicture-title">
              Portrait orig
          </div>
     </div>
     <div class='column two'><div class='coltitle' >Right Column is x% width</div><br/></div>
    
    
    <div style="clear:both"></div><br/><br/><hr/>
    Original images normal size<br/>
    <img src="http://vanilla.infxsolutions.com/dyn/_pictures/portrait.png" />    
    <img src="http://vanilla.infxsolutions.com/dyn/_pictures/landscape.png" />    
    
</div>

CSS

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.container { 
    max-width:600px; background-color:#eee; padding:10px; 
    font-size:12px;
    font-family:arial;
    margin-left:auto;
    margin-right:auto;
}

.container .coltitle { 
    text-align:center;
    background-color:#FFDEA0;
}


.container .column.one { 
    float:left; 
    margin:0px 0px 0px 0px;
    width:50%;
    background-color:#FFFEF0;
}

.container .column.two { 
    float:left; 
    margin:0px 0px 0px 0px;
    width:49%;
    background-color:#F0FEFF;
    min-height:200px;
}


.container .dbpicture img  {

   /* height:180px; This will have to be generated by jQuery */
    width:100%;
    
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top left;
    overflow:hidden;
}

.container .dbpicture-title  {
    margin:10px auto 0px auto;
    text-align:center;
    min-height:20px;
}

.flexbutton {height:12px;overflow:hidden;}

.flexbutton :hover {height:24px;}

JavaScript

$(window).on('resize load',function(ev,ui){
        $.each($('.container .dbpicture'),function(){
           var w = $(this).width();
           var $img = $(this).find('img');
           var r=$img.data('aspectratio');
           $img.height(w * r );
           $(this).height(w * r );
           if(ui){ // picture being resized by handle
               console.log(ui.size);
           }
        });
      
      console.log('col one width:'+$('.column.one').css('width'));
      console.log('col two width:'+$('.column.two').css('width'));
     
  });
  $(document).ready(function(){
        $(".dbpicture").resizable();
        $(".flexbutton").on('click',function(){
            var $dbpic = $(this).prev();
            $dbpic.width('100%');
             $(window).trigger('resize');
        });
      
      getpercentagewidth('.column.one');
      getpercentagewidth('.column.two');

  });

function getpercentagewidth(sel){
      var f = $(sel).width();
      var pw = $(sel).parent().width();
      var percent = (f/pw*100.0);
      $(sel+' .coltitle').html("Column is "+ (Math.round(percent).toFixed(2)) +"% width");    
}