<div class="parentbox">
    <img class="fitimg" src="sample.jpg">
</div>

.parentbox{
    height: 400px;
}

<div class="hero">
    <img class="js-fit-hero" src="images/hero.jpg" alt="">
</div><!--hero-->
<main class="main">
    <article class="post">
        <figure class="post__img">
            <img class="js-fit-post-img" src="images/thumbnail.jpg" alt="">
        </figure>
        <div class="post__content">
            <h2 class="post__content__title">section title1</h2>
            <p>記事の抜粋文など記事の抜粋文など記事の抜粋文など<br>記事の抜粋文など記事の抜粋文など</p>
        </div><!--post__content-->
    </article>
    <article class="post">
        <figure class="post__img">
            <img class="js-fit-post-img" src="images/thumbnail2.jpg" alt="">
        </figure>
        <div class="post__content">
            <h2 class="post__content__title">section title1</h2>
            <p>記事の抜粋文など記事の抜粋文など記事の抜粋文など<br>記事の抜粋文など記事の抜粋文など</p>
        </div><!--post__content-->
    </article>
</main>
<footer class="footer">
    <p class="copyright">@2017 WEBDESIGNDAY</p>
</footer>

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.hero{
    margin-bottom: 100px;
    height: 400px;
}
.main{
    margin: 0 auto 100px;
    width: 80%;
}
.post{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}
.post__img{
    height: 300px;
    width: 30%;
}
.post__content{
    width: 65%;
}
.post__content__title{
    margin-bottom: 40px;
}
.footer{
    background: #222;
    color: #fff;
    padding: 40px 0;
    text-align: center;
}

$(window).on('load',function(){
    fitImg( $('.js-fit-hero') );
     
    $('.js-fit-post-img').each(function(){
        fitImg( $(this) );
    });
});
 
$(window).on('resize',function(){
    fitImg( $('.js-fit-hero') );
     
    $('.js-fit-post-img').each(function(){
        fitImg( $(this) );
    });
});
     
function fitImg(object){        
    //親要素取得
    var parent = object.parent();
 
    //画像サイズ取得
    var imgW = object.width();
    var imgH = object.height();
 
    //フィットさせる親要素のサイズ取得
    var parentW = parent.width();
    var parentH = parent.height();  
 
    //幅・高さの拡大率取得
    var scaleW = parentW / imgW;
    var scaleH = parentH / imgH;
 
    //幅・高さの拡大率の大きいものを取得
    var fixScale = Math.max(scaleW, scaleH);
 
    //画像の幅高さを設定
    var setW = imgW * fixScale;
    var setH = imgH * fixScale;
 
    //画像の位置を設定
    var moveX = Math.floor((parentW - setW) / 2);
    var moveY = Math.floor((parentH - setH) / 2);
 
    //設定した数値でスタイルを適用
    //親要素のスタイル
    parent.css({
        'overflow': 'hidden',
        'position' : 'relative'
    });
    //フィットさせる要素のスタイル
    object.css({
        'position': 'absolute',
        'width': setW,
        'height': setH,
        'left' : moveX,
        'top' : moveY
    });
}