サンプル画像を見てみよう
まずは、サンプル画像を見てくださいね。
私が撮影した大阪水上バスのデジカメ写真画像です。
ブラウザ幅を変えた際の画像表示状況変化を見ていただきたいので、このページはほぼ横幅一杯になるように設定しています。また、縦横幅の変化がわかりやすいように、それぞれの場蔵を赤い枠で囲みました。
３つのサンプル画像を掲載していますので、ブラウザの横幅を広めたり、縮めたりして見てくださいね。
①
②
③
表示結果の感想は？
いかがですか？
なんだか、①と②が同じに見えるけど、気のせい？
多分、ブラウザの横幅が1100pxくらいのときは、①②③のどれもが同じように表示されるのですが、ブラウザ幅を広げたり、狭めたりすると、③が明らかに違う表示状況になってきます。 下の画像は、ブラウザの横幅が600pxあたりのときの表示状況です。
明らかに、③だけが縦横比も違うし、画像の中央部分だけが表示されているので、書かれた文字が読めない状態になっています。
種明かし
教えておしえて〜
では種明かしです。
①は、画像を表示させているだけなんですよ。
上では、3つの画像を表示させていますが、ソースを見ていただくと、次のようなHTML文を書いていることが判ります。
①は単純に記事内に画像を表示させているだけなんですね。
幅100%指定しているので、ブラウザの幅を拡大・縮小させた場合、それに応じて縦横比を保ったまま画像の大きさが変わるんです。
そして、②と③は画像に関する記述がなくて、単にdivで囲ったboxなんですね。
じゃあ、画像は何で表示しているの？
① <div class="border-red"><img src="https://web.no-koto.net/wp-content/uploads/2019/10/s001.jpg" alt="" width="100%" /></div> ② <div class="border-red b_01"> </div> ③ <div class="border-red b_02"> </div>
②と③は、ボックスの背景として表示しているんですよ。
CSSはこんな感じです。
.b_01 {
width: 100%;
height:calc(400 / 1024 * 100vw);
background:url("https://web.no-koto.net/wp-content/uploads/2019/10/s001.jpg") center center / cover no-repeat;
}
.b_02 {
width: 100%;
height:420px;
background:url("https://web.no-koto.net/wp-content/uploads/2019/10/s001.jpg") center center / cover no-repeat;
}
②には「b_01」クラス、③は「b_02」クラスを適用させています。
どちらも、background-size: cover; として、要素全体に画像を表示する設定としています。
（ここでは、ボックス全体の背景として表示させる設定ですね。ちなみに、上のCSSではbackground-sizeを省略したショートハンド表記としています。）
ボックス内に文章を記載したりする場合、背景画像があると雰囲気も出るから良く使われる手法で、通常は、③「b_02」のように単にcoverだけを指定することが多いのですが、今回のように画像の横幅一杯に文字などが入っている場合は、ブラウザの横幅を縮めていくと、横幅が1024pxより小さくなってくると背景画像の左右が切り取られたような表示になってしまいます。
CSSを見ると、「b_02」クラスは高さが420pxとなっています。今回使った画像は横1024px、縦400px ですから、ブラウザの横幅が1024pxより小さくなってくると、背景画像の上下をボックスの高さに合わせるので、結果として左右が切り取られることとなるんですね。
でも、背景に画像全体を見せたい場合は、困るんじゃない？
そうそう、だから②「b_01」クラスのような設定を考えたんですよ。
「b_01」クラスのキモは、次のように高さを可変してくれるように設定していることなんです。
height:calc(400 / 1024 * 100vw);
CSS3では、calcを使って計算式が使えるので、100vwつまり現在表示している画面幅に、元画像の縦400px を横幅1024pxで割った数字を掛けることで、そのときの画面幅に対応するボックス高さを出しているということです。
まとめ
あらかじめ画像の高さと幅を把握しておく必要はありますが、Wordpressの場合は、管理画面の「メディア」にて画像の情報を確認できるので、そんなに面倒でもないですよね。
この設定を使うと、ボックスだけではなく、画面全体に表示させる場合でも画像の縦横比を保った状態で、背景画像を表示させることが出来るので、結構、使い道があると思いますよ。
いかがですか？
私も色々な場面で、この設定を使ったりしています。
良かったら、お試しくださいね。
コメント