JSFiddle - React, Tailwind, and code Playground

by Alex Chizhov

HTML

<div class="all">
<div class="block">
<div class="img" id="c1">
<img src="http://www.virginmobileusa.com/_img/_phones/iphone4s16gbwhitecpo/iphone4s16gbwhitecpo-overview-large.png?051413">
</div>
    </div><!-- block -->

    <div class="block">
<div class="img" id="c2">    
<img src="http://www.odysseyinc.com/blog/wp-content/uploads/2013/12/samsung_smart_tv_apps.jpg">
</div>
    </div><!-- block -->
    </div><!-- all -->
    
    <div id="img1"></div>
    <div id="img2"></div>
        
        <div id="img2new"></div>
        
        <div id="paddingTest"></div>
        
        
        <div id="img3"></div>
        <div id="img4"></div>

CSS

.block{
    width:320px;
    height:320px;
    display:inline-block;
    margin-right:20px;
    overflow:hidden;
    background-color:grey;
    padding:10px;
    
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    
    text-align:center;
}

.img{
    
    width:300px;
    height:300px;
    max-height:300px;
    max-width:300px;
    
    display:block;
    
    overflow:hidden;
    background-color:orange;
    
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    
    text-align:center;
}

.img img{
    border:none;
    outline:none;
}

JavaScript

jQuery(function($){

    var c1width = $('#c1 img').width();
    var c1height = $('#c1 img').height();
    
    var c2width = $('#c2 img').width();
    var c2height = $('#c2 img').height();
    
    var blockWidth = $('.img').width();
    var blockHeight = $('.img').width();
    
    var imgWidth = $('.img img').width();
    var imgHeigh = $('.img img').height();
    
    
    
    var imgNewHeight = Math.round(parseInt(c2height)/(parseInt(c2width)/parseInt(blockWidth)));
    
    var imgHeightPadding = (parseInt(blockHeight) - parseInt(imgNewHeight))/2;
    
$('#img3').html(imgWidth + 'x' + imgHeigh);
    $('#img4').html(imgWidth + 'x' + imgHeigh);
    
$('#img1').html(c1width + 'x' + c1height);
$('#img2').html(c2width + 'x' + c2height);
    $('#paddingTest').html(imgHeightPadding);
    
    $('#img2new').html(imgNewHeight);

    // Высота картинки > Ширины картинки
    if(c1height > c1width){
        // Высота картинки > Высоты блока
        $('#c1 img').height(blockHeight);
    } else { // Ширина > Длины
        $('#c1 img').width(blockWidth);
    }
    
    // Высота картинки > Ширины картинки
    if(c2height > c2width){
        // Высота картинки > Высоты блока
        $('#c2 img').height(blockHeight);
    } else { // Ширина > Длины
        $('#c2 img').width(blockWidth);
        $('#c2').css('padding-top',imgHeightPadding);
    }
    
        
    

})(jQuery);