DEV

画面の高さに画像サイズを合わせる

#CSS#Javascript

トップページのでっかい画像を画面の高さに合わせることで、スマホでもPCでも最初の表示は画面全体に画像が表示されるようにしたい。

画面の高さは、$(window).height()なんじゃないかと思っている。だから最初に、$(‘#top_img’).height($(window).height())みたいにすればいいだけなのではないかと思っております。しかし、画面リサイズ時の画像サイズ調整も考えた方がいいかもしれない。画像を入れるdivと、画像自体のサイズを変更しないといけないかもしれない。

HTML

<div class="top_box_before">
    <div class="top_box_content"></div>
</div>
<div class="top_box"></div>

CSS

.top_box, .top_box_before{
    height:600px;
}
.top_box{
    position: relative;
    width:100%;
    background-color: #fff ;
    background:no-repeat center center;
    background-size:cover;
    z-index: 0;
}
.top_box_before{
    position: absolute;
    background: rgba(33, 33, 33, 0.3);
    z-index: 1;
    width:100%;
    top:40px;
    display:table;
}

.top_boxの背景画像は、別のところで設定している。

Javascript

var h = $(window).height();
$('.top_box').height( h + 'px');
$('.top_box_before').height( h + 'px');

これだけ。画像リサイズは考慮しなくていいと思った。