受託開発の現場でのお話を前提にします。
デザイナーからデータをもらって、さあ実装！でもその前に。
エンジニアとして確認しなければならないことがあります。
例えば、横1280pxでデザインができていて、
そこに左右貫通画像（多くはキービジュアル）があった場合、
エンジニアは

「1280px以上のデバイス（例えばiMacとか）で見た時はどうなるの？」
「逆にウインドウ幅を縮めた場合は？」

といったことをデザイナーに確認しなければなりません。
私が今まで実装してきた中では、
以下のようなケースが多くありましたのでまとめます。

Case1 : 単純に縦横比維持したまま拡大・縮小

画面を広げれば広げるほど、その分画像も拡大していく仕様です。
単純に下記のCSSでよいでしょう。

img {
   width: 100%;
   height: auto;
}

ただ、この場合一つデメリットがあります。
それは、大きいデバイスで見た時、原寸大以上に画像が大きくなり見栄えが悪くなることです。
デザイナーに「retina対応の2倍画像を用意してもらう」方法がありますが、今度は画像容量が重くなるので、パフォーマンスに影響してしまいます。
どうしてもこのケースを取らないとならない場合は、
例えばJavaScriptでローディング処理を入れるなどの方法があるでしょう。
画像のロードが完了したらページを表示するという実装が考えられます。

Case2 : 高さは固定値にする

このパターンも多いと思います。
例えば、デザインのキービジュアルが「横1280px・縦500px」だった場合、
heightは500pxで固定してしまうということです。
これ、いわゆるheight: 100vh;の、
「キービジュアルはウインドウの高さいっぱいにする」処理をするときも同じ文脈になると思います。

当たり前の話ですが、
「高さは固定値だが、横の長さは変化する」
＝
「デザイン通りのウインドウサイズ以外では、縦横比は維持されない」
＝
「画像のどこかは見切れてしまう」
ということになります。
つまり、画像のどの部分を犠牲にするか、という話になります。
ではCase2の場合、どのような手段があるか考えてみます。

Case2-1 : background-size: cover;で対処

<div class="outer">
   <div class="inner">
      ......
   </div>
</div>

.outer {
   background-image: url(...);
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
   height: 500px;
}

background-size: cover;は画像を縦横比維持させたまま、隙間を満遍なく埋めてくれます。
この対処法は多いかと思います。
見栄えとしては、デザインサイズから離れたウインドウサイズになればなるほど（ウインドウサイズを広げていくほど）、background-positionで指定した位置を起点として拡大していくような見栄えになります。
ただ、画像の種類によってはNGなパターンもあります。
それは、顔写真などが乗っている場合です。
「Macbookではちゃんと見えたのに、iMacでは顔が見切れている！」という事態になってしまう可能性があります。
これは注意が必要です。

case2-2 : background-sizeはいじらず、左右の見切れはCSSで対処

<div class="outer">
   <div class="inner">
      ......
   </div>
</div>

.outer {
  background-image: url(...);
  background-position: center center;
  background-repeat: no-repeat;
  height: 500px;
  background-color: #fff;
}

coverを使わない、かつbackground-position: center center;の場合、
デザインサイズより大きいウインドウサイズだと左右に余白ができることになります。
ここを、background-color:;で埋めるという作戦です。
ベタで塗りつぶしてしまえば、いくら大きいデバイスでも問題ありません。
簡単なグラデーションの場合や、幾何学模様の繰り返しなど、とにかくCSSで再現できるのであれば、この方法が使えます。
ただ、これは単純なイラスト系のキービジュアルにしか使用できないでしょう。
大抵はリピートできない写真系が多いはずです。
もうひとつの方法を紹介します。

case2-3 : 超横長の画像を用意してもらい、position: absolute;で絶対配置する

画像系で、かつcoverもだめとなったらこの手段を使います。
まずデザイナーに、例えば「縦500p・横2000px」くらいの画像を用意してもらいます。
そして、次のスタイルを当てます。

<div class="outer">
   <div class="inner">
      <img src="..." alt=".." />
   </div>
</div>

.outer {
   position: relative;
   height: 500px;
   overflow: hidden;
}
.inner {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   height: 100%;
   width: 100%;
}

これで、横長の画像が中央に絶対配置されます。
横2000px以上のウインドウサイズでみると余白が現れ始めますが、
実質そのようなデバイスへの対応まで求められることは少ないと思います。
imgを原寸大より大きくすることなく、大きいデバイスに対応できます。
これも大きい画像が必要になるのですが、Case1よりは容量は軽く済むでしょう。

まとめ

デザイナーのみならず、ディレクターやプロデューサー、そしてクライアントとあれこれコミュニケーションしながら、一つの制作物を仕上げることが受託制作の醍醐味だと思っています。
今回はデザイナーとの連携が必要ですが、どんどん会話して良いものを作っていきたいです。

「こんなパターンあります」
などありましたら、ご教示ください。