ウィンドウ幅いっぱいのヘッダー画像。
img要素で表示するタイプ
ちゃんと画像を紹介したい時には、背景画像でなくて、img要素でマークアップした方が良いと思うんです。そんなわけで、img要素を、header要素めいっぱいに広げて配置するときのためのメモです。
img要素で表示する方法。
HTMLは以下のようにしてみました。figure要素の中にimg要素を配置して、ライセンス表記はfigcaption要素として入れています。
<header>
<h1>Halfscreen Photo Header</h1>
<figure>
<img src="img/background.jpg" alt="" width="1024" height="768">
<figcaption class="caption">license</figcaption>
</figure>
</header>CSSは、header要素をウィンドウ上半分に配置するまでは前述と同じ。
あとはfigure要素を、header要素内を埋めるようにpositionプロパティで左上に絶対配置したうえ、横幅と高さを100%に指定します。
header figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
}※UserAgent Stylesheetで周囲に指定されているmarginも、0にしておきます。
さらに、その中のimg要素も、figure要素内を埋めるように、横幅と高さを100%に指定します。
header figure img {
width: 100%;
height: 100%;
}けどこのままでは、ウィンドウのサイズに合わせて画像が伸びたり縮んだりして、よろしくないですね…:(。
アスペクト比を維持して埋める
object-fitプロパティを使えば、アスペクト比を維持した状態で、img要素内を画像で埋めることができます！
img要素内の“画像”の表示の仕方を、まるでbackgroundプロパティみたいに指定できる、まるで魔法みたいなプロパティですねーXD。
header figure img {
width: 100%;
height: 100%;
object-fit: cover;
}object-fitプロパティについて詳しくは下記ページを参照のこと。
IEでも大丈夫な方法
けど、IE11では、object-fitプロパティに対応していません…。IE11はまだ結構、対応しなくちゃいけないですよね…:ω。ということで、object-fitプロパティを使わずに画面めいっぱい表示するためのメモです。
まず、img要素のサイズは、横幅はウィンドウいっぱい（100%）のままで、高さは、横幅に合わせて成り行きとなるよう、height: autoを指定しておきます。
header figure img {
width: 100%;
height: auto;そして、figure要素内の上から50%、左から50%の位置に絶対配置したうえ、transform: translate(-50%, -50%)と指定。これで、img要素がどんなサイズになっても、figure要素の中央に配置されるようになります。
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}transformプロパティは要素に変形を加えることができるプロパティで、translate(x, y)では、要素の位置を、X方向、Y方向へズラすことができます。
top/leftプロパティの50%が、親要素の大きさを基準とした50%であるのに対して、transformプロパティでの50%は、その要素の大きさを基準とした50%となるのがポイントです。
あとは、img要素がheader要素からはみ出した場合、はみ出した部分は表示させないように、overflow: hiddenを指定します。
header {
overflow: hidden;
position: relative;
︙このままだと、img要素の高さがheader要素よりも小さい時に、上下に余白ができちゃいますね。
img要素の高さが、header要素より小さくならないようにすればよいわけなので、最小の高さが50vhとなるように、min-height: 50vhと指定してみましょう。
transform: translate(-50%, -50%);
min-height: 50vh;
}すると、img要素の高さは50vh以下にならなくなりましたが、横幅はウィンドウ100%のまま横に縮むようになっちゃいました…。
これは、最小の高さだけじゃなくて、最小の横幅も指定しなきゃならないですね…。
img要素の高さが50vh以下のときに横幅を縮めないようにするには、img要素の高さが50vhになる時の横幅をmin-widthに指定すればよいです。
上のサンプルの場合、画像サイズが1024px×768pxなので、横:縦の比率は4:3、ということは、高さが50vhの時の横幅（w）は、次の式で表せます。
w / 50vh = 4 / 3なので、w = (4 / 3) * 50vh
そんなこんなで、img要素の高さが50vhになった時の横幅は66.6666...vhということですねーXD！
横幅がこれ以上小さくならないということは、高さもこれ以上小さくならないということなので、min-height: 50vhの指定はもう取っちゃっても大丈夫です。
transform: translate(-50%, -50%);
min-width: 66.6666vh;
}なんとかなりましたね！
ただしこの方法は、img要素の縦横比に依存するということに注意ですX(！
例えば、img要素の縦横比が16:9の時には、min-width: 88.8888vhにしなくちゃいけないし、img要素のサイズが中途半端なサイズだったら、min-width: calc(2188 / 648) * 50vhとかにしなくちゃいけない、ということ。
なので、この方法を使う場所では、img要素のサイズを統一する必要があるってことですね…⁑O。
例えば、以下のサンプルは、縦横比が16:9の画像を使っているのに、4:3用のスタイルを指定しちゃったヘッダーです。
4:3用のスタイルで16:9のimg要素を表示しちゃったヘッダー
以下はそれぞれの画像サイズに合わせて、ちゃんとスタイルを指定しているサンプルです。