たまには簡単な記事でも書こうかなみたいな。
ちなみにクラスや変数の命名はCamel（アンダースコアで単語を区切る命名）が好きだからCamelで全部書いてる。
やりたいこと
- 画像を画面サイズ目一杯にしたい
- 当たり前だけど画像が縦に伸びたり横に伸びたりしたくない
- かつ、画像が両側から切れるようにしたい（中央配置）
- でも、background-size:coverや単位のvw、vhやflexboxはIE8で効かないし、画像に文字があってaltを入れたいから背景画像ではなくimgタグを使いたい
これに近いことって割とよくあると思う。実際これに近いことはよくコーディングしてる。
ソースコード
それに対してできたものがこちらになります。
HTML(headタグ内やbodyタグなどは省略)
<div class="main_img">
<h1><img src="./images/section_02_bg.png" alt=""></h1>
</div>
CSS(reset.cssは省略)
.main_img {
width: 100%;
height: 100%;
}
.main_img h1 {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.main_img h1 img {
position: absolute;
}
Javascript(jquery使用前提コード)
//common
var w_w;
var w_h;
$(window).on("load resize",function() {
w_w = $(window).width();
w_h = $(window).height();
});
//main_img
var main_img_w = 1236; //フルスクリーンで表示させたい画像の幅
var main_img_h = 763; //フルスクリーンで表示させたい画像の高さ
$(window).on("load resize",function() {
if (w_w/main_img_w >= w_h/main_img_h) {
$(".main_img h1 img").css({
"width": w_w + "px",
"height": "auto",
"top": w_h/2 + "px",
"left": w_w/2 + "px",
"margin-top": -(w_w/main_img_w*main_img_h)/2 + "px",
"margin-left": -w_w/2 + "px"
});
} else {
$(".main_img h1 img").css({
"width": "auto",
"height": w_h + "px",
"top": w_h/2 + "px",
"left": w_w/2 + "px",
"margin-top": -w_h/2 + "px",
"margin-left": -(w_h/main_img_h*main_img_w)/2 + "px"
});
}
});
解説
HTML
<div class="main_img">
<h1><img src="./images/section_02_bg.png" alt=""></h1>
</div>
とくに言わずもがな。ここでわからない人はHTMLとCSSを勉強しよう。
imgはpタグとかh〜タグで囲むといいよ。divでもいいけど、divってなんとなく要素の塊って感じするし。
今回はメインビジュアルの画像を想定したのでh1タグで囲んでいる。
CSS
.main_img {
width: 100%;
height: 100%;
}
.main_img h1 {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.main_img h1 img {
position: absolute;
}
.main_img h1 imgに入れるtopとかleftのプロパティは後でjsで書いていくので、ここではpositionだけ。
h1タグはh1 imgの画像をマスクするための画像を囲っているブロックとして認識してみればわかる。
h1タグにoverflow:hiddenを設定しておくこと。ちなみにoverflowはpositionがrelativeかabsoluteかfixedじゃないと効かない。
Javascript
ここでだけ分けて解説。
//common
var w_w;
var w_h;
$(window).on("load resize",function() {
w_w = $(window).width();
w_h = $(window).height();
});
ここではブラウザの高さと幅をとっている。$(window).width();でブラウザの幅、$(window).height();でブラウザの高さ。
$(window).on(“load resize”,function() {});でページ読み込み完了時とリサイズ（画面サイズを変更した）時に中のプログラムが実行される。
要するにページ読み込んだ時とリサイズする度に改めてブラウザの高さと幅をとっている。
汎用的なものだからcommonとしてわかりやすく置いておくとか、common.jsみたいなのを作ってその中に入れてあげる方がいいかも。
var main_img_w = 1236; //フルスクリーンで表示させたい画像の幅 var main_img_h = 763; //フルスクリーンで表示させたい画像の高さ
ここではフルスクリーンさせる画像の高さ幅を数で記述する。.main_img h1 imgのデフォルトの高さ幅だね。
$(window).on("load resize",function() {
if (w_w/main_img_w >= w_h/main_img_h) {
$(".main_img h1 img").css({
"width": w_w + "px",
"height": "auto",
"top": w_h/2 + "px",
"left": w_w/2 + "px",
"margin-top": -(w_w/main_img_w*main_img_h)/2 + "px",
"margin-left": -w_w/2 + "px"
});
} else {
$(".main_img h1 img").css({
"width": "auto",
"height": w_h + "px",
"top": w_h/2 + "px",
"left": w_w/2 + "px",
"margin-top": -w_h/2 + "px",
"margin-left": -(w_h/main_img_h*main_img_w)/2 + "px"
});
}
});
再び$(window).on(“load resize”,function() {});。この説明は省略。
中はif文で分岐されている。
if (w_w/main_img_w >= w_h/main_img_h) {
...
} else {
...
}
ブラウザの縦横比が画像の縦横非より縦に長いか、横に長いかで分岐している。
2000px × 763pxのブラウザで見ると、デフォルトだと画像が1236px × 763pxだから左右に隙間ができてしまう。
この場合は画像のwidthを100%にして、heightをautoにしたい。
1236px × 1000pxのブラウザで見ると、同様に上下に隙間ができてしまう。
この場合は画像のheightを100%にして、widthをautoにしたい。
この分岐を記述している。ちなみに他にもif文の書き方あるけど大差ないからここでは省略。
[/javascript]
$(“.main_img h1 img”).css({
“width”: w_w + “px”,
“height”: “auto”,
“top”: w_h/2 + “px”,
“left”: w_w/2 + “px”,
“margin-top”: -(w_w/main_img_w*main_img_h)/2 + “px”,
“margin-left”: -w_w/2 + “px”
});
[/javascript]
分岐の中身(上)。ブラウザの横が長い時の処理。
widthには画面幅を当てて、heightはauto、
top、leftは50%とほぼ同じ感じ。
んで、marginでマイナスして中央に置いてる。マイナスする数は、それぞれ画像の高さ幅の半分。
画像の幅がブラウザ幅のため、margin-leftはブラウザ幅/2の値でいいんだけど、margin-topは少し計算が入る。
というのも、画像の高さはautoにしているから。なので、高さを計算してあげましょう。
こちらも画像の比率を使っている。
1236px : 763px = w_w : ?
の?に入る数値を出してあげればいい。
そして、その値が出たら、最終的にしたいのは-画像の高さ/2をmargin-topにあてることなので、それを書く。
分岐の下の方は省略。要するに逆のことをしているだけ。
以上。