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 >Column is 50% width</div><br/>  
          <div class="dbpicture ui-widget-content 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="dbpicture-title">
              landscape orig
          </div>
         <div class="dbpicture ui-widget-content 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="dbpicture-title">
              Portrait orig
         </div>
     </div>
     <div class='column two'></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 { 
    width:100%; background-color:#eee; padding:10px; 
    font-size:12px;
    font-family:arial;
}

.container .column.one { 
    float:left; margin:0px 0px 0px 0px;
    width:50%;
}
.container .column.two { 
    float:left; margin:0px 0px 0px 0px;
    width:50%;
}


.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;
}

JavaScript

$(window).on('resize load',function(){
        $.each($('.container .dbpicture'),function(){
           var w = $(this).width();
           var $img = $(this).find('img');
           var r=$img.data('aspectratio');
           $img.height(w * r );
        });
  });