質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.23%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 835

may88seiji

score 77

困っていること

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

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

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

該当のソースコード

<div class="top01">
        <div class="top01_right"><img class="right" src="common/img/top_right.jpg" alt="">
            <img src="common/img/product.png" alt="" class="product">
            <img src="common/img/cc2.png" alt="" class="cc2">
            <a href="../monthly/index.html"><img src="common/img/btn_m.jpg" alt="" class="btn_m"></a>
        </div>

        <div class="top01_left"><img class="left" src="common/img/top_left.jpg" alt="top_left">

            <map name="Map" id="Map">
                <img src="common/img/btn_1day.png" alt="" class="btn_1day" usemap="#Map" border="0" target=”_blank”>
                <img src="common/img/cc1.png" class="cc1" alt="">
                <area alt="" title="" href="../contact/index.html" shape="poly" coords="1,1,217,1,160,59,2,59" />
            </map>
        </div>
        <img class="logo" src="common/img/logo.png" alt="top01">
    </div>
.top01{
    position: relative
}

.logo{
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -139px;

}

.product{
    position: absolute;
    top: 30%;
    right: 0;
    width: 90%
}

.cc2{
    position: absolute;
    top: 17%;
    right: 19%;
    width: 50%
}

.btn_m{
    position: absolute;
    top: 70%;
    right: 22%;
    width: 50%
}
.btn_m:hover{
    opacity: 0.8
}


.top01_left{
   position: relative;
    width: 50%;
    left: 0;
    overflow: hidden
}

.btn_1day{
    position: absolute;
    top: 70%;
    right: 22%;
    width: 50%
}


.right{
    width: 100%
}
.cc1{
    position: absolute;
    top: 8%;
    right: 24%;
    width: 4%

}

.top01_right{
position: relative;
  position: absolute;
    width: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    overflow: hidden

}
$(function () {

    $(window).on('load resize', function () {

        var w = $(window).width();
        var h = $(window).height();
        var imageW = 640;
        var imageH = 1041;
        var imageRatio = imageH / imageW;

        console.log(h);

        var sh = h - 100;
        var mw = w / 2;
        var mh = mw * imageRatio;

        //横処理
        $(".top01_left").css({
            height: sh + "px",
            width: mw + "px"
        });
        $(".left").css({
            height: mh + "px",
            width: mw + "px"
        });

        //縦処理
        if (mh < sh) {
            var ratio = sh / mh;
            console.log(ratio);
            $(".left").css({
                height: mh * ratio + "px",
                width: mw * ratio + "px"
            });
        }

        // 右画像
        $(".top01_right").css({
            height: sh + "px",
            width: mw + "px"
        });
        $(".right").css({
            height: mh + "px",
            width: mw + "px"
        });

        if (mh < sh) {
            var ratio = sh / mh;
            console.log(ratio);
            $(".right").css({
                height: mh * ratio + "px",
                width: mw * ratio + "px"
            });
        }

    });
});
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

解決いたしました。
隙間はスクロールバーの分のズレでした。

以下発生の流れ
ウインドウより画像が大きい→スクロールバーができる→画像リサイズ→スクロールバーが消える→隙間がのこる

cssでもともとの画像を小さくする→リサイズ の流れでスクロールバーを発生させなくすることで解決しました。
ありがとうございました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.23%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる