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%;
}

けどこのままでは、ウィンドウのサイズに合わせて画像が伸びたり縮んだりして、よろしくないですね…:(。

header figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

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要素を表示しちゃったヘッダー

以下はそれぞれの画像サイズに合わせて、ちゃんとスタイルを指定しているサンプルです。

16:9のimg要素を表示するタイプのヘッダー 中途半端なサイズのimg要素を表示するタイプのヘッダー