JSFiddle - React, Tailwind, and code Playground

CSS - Picture background zoom ,see full image but resized . Use this for Pictures in PageEditor. With wrapper flexi by % width

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='content-wrapper left one'>
        <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');" />
        </div>
        <div class="dbpicture-title">
            landscape orig in square box
        </div>
    </div>
    <div class='content-wrapper left two'>
       <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');" />
       </div>
       <div class="dbpicture-title">
            Portrait orig in square box
       </div>
    </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 .content-wrapper.left { 
    float:left; margin:0px 20px 0px 0px;
    overflow:hidden;
}

.container .content-wrapper.right { 
    float:right; margin:0px 0px 0px 20px;
}

.container .dbpicture.landscape img  {

    width:100%;
    
    background-size: 100% auto;

    background-repeat: no-repeat;
    background-position: center center;
    overflow:hidden;
}


.container .dbpicture.portrait img  {

    height:100%;
    
    background-size: auto 100%;

    background-repeat: no-repeat;
    background-position: center center;
}


.container .content-wrapper.one .dbpicture { 
    width:300px;
}
.container .content-wrapper.two .dbpicture { 
    height:300px;
}

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

.container .center {  background-color:#aaa; }
.container .center .fill { width:100%; background-color:#F0E0E0; }