jQuery で調整した画像に隙間ができてしまいます。

###困っていること
二つの画像を比率を保ったまま、ウインドウサイズに合わせて並べることを実現したいとおもっています。
下記jQueryコードにてウインドウサイズを取得し、画像の縦と横のサイズを書き換えています。

ここから本題なのですが、大きなウインドウでは画像は問題なく横に並んでいるのですが、
小さなウインドウだと画面が表示された時に真ん中のラインに隙間ができてしまいます。
ウインドウをリサイズすると隙間は埋まります。

原因がわからず困っております。
アドバイスを何卒よろしくお願いします。

###該当のソースコード

html
1 <div class="top01">
2        <div class="top01_right"><img class="right" src="common/img/top_right.jpg" alt="">
3            <img src="common/img/product.png" alt="" class="product">
4            <img src="common/img/cc2.png" alt="" class="cc2">
5            <a href="../monthly/index.html"><img src="common/img/btn_m.jpg" alt="" class="btn_m"></a>
6        </div>
7
8        <div class="top01_left"><img class="left" src="common/img/top_left.jpg" alt="top_left">
9
10            <map name="Map" id="Map">
11                <img src="common/img/btn_1day.png" alt="" class="btn_1day" usemap="#Map" border="0" target=”_blank”>
12                <img src="common/img/cc1.png" class="cc1" alt="">
13                <area alt="" title="" href="../contact/index.html" shape="poly" coords="1,1,217,1,160,59,2,59" />
14            </map>
15        </div>
16        <img class="logo" src="common/img/logo.png" alt="top01">
17    </div>

css
1.top01{
2    position: relative
3}
4
5.logo{
6    position: absolute;
7    top: 50%;
8    left: 0;
9    right: 0;
10    margin: auto;
11    margin-top: -139px;
12
13}
14
15.product{
16    position: absolute;
17    top: 30%;
18    right: 0;
19    width: 90%
20}
21
22.cc2{
23    position: absolute;
24    top: 17%;
25    right: 19%;
26    width: 50%
27}
28
29.btn_m{
30    position: absolute;
31    top: 70%;
32    right: 22%;
33    width: 50%
34}
35.btn_m:hover{
36    opacity: 0.8
37}
38
39
40.top01_left{
41   position: relative;
42    width: 50%;
43    left: 0;
44    overflow: hidden
45}
46
47.btn_1day{
48    position: absolute;
49    top: 70%;
50    right: 22%;
51    width: 50%
52}
53
54
55.right{
56    width: 100%
57}
58.cc1{
59    position: absolute;
60    top: 8%;
61    right: 24%;
62    width: 4%
63    
64}
65
66.top01_right{
67position: relative;
68  position: absolute;
69    width: 50%;
70    right: 0;
71    top: 0;
72    bottom: 0;
73    margin: auto;
74    overflow: hidden
75    
76}

jQuery
1$(function () {
2
3    $(window).on('load resize', function () {
4
5        var w = $(window).width();
6        var h = $(window).height();
7        var imageW = 640;
8        var imageH = 1041;
9        var imageRatio = imageH / imageW;
10
11        console.log(h);
12
13        var sh = h - 100;
14        var mw = w / 2;
15        var mh = mw * imageRatio;
16
17        //横処理
18        $(".top01_left").css({
19            height: sh + "px",
20            width: mw + "px"
21        });
22        $(".left").css({
23            height: mh + "px",
24            width: mw + "px"
25        });
26
27        //縦処理
28        if (mh < sh) {
29            var ratio = sh / mh;
30            console.log(ratio);
31            $(".left").css({
32                height: mh * ratio + "px",
33                width: mw * ratio + "px"
34            });
35        }
36        
37        // 右画像
38        $(".top01_right").css({
39            height: sh + "px",
40            width: mw + "px"
41        });
42        $(".right").css({
43            height: mh + "px",
44            width: mw + "px"
45        });
46        
47        if (mh < sh) {
48            var ratio = sh / mh;
49            console.log(ratio);
50            $(".right").css({
51                height: mh * ratio + "px",
52                width: mw * ratio + "px"
53            });
54        }
55        
56    });
57});