今回は画面幅を縮めてもコンテンツ幅より大きい画像のサイズを変えずに中央寄せした状態のまま表示する方法を2つ紹介します。

object-fitプロパティを使ってサムネイルやアイキャッチ画像をキレイにリサイズする方法

2021年2月1日に公開しました！
object-fitというプロパティを利用してもきれいに表示することが出来ます！
気になる方はぜひチェックしてみてください！

前提条件

・コンテンツ幅：980px以下（レスポンシブ）

・画像サイズ：横1200px、縦600px

とします。

また、画像の高さを固定するか、可変にするかで対応が変わってきます。

高さ固定の場合、ここでは600pxとします。

positionを利用した方法

高さ固定の場合

高さ固定の場合は、position:relative;をつける要素にheightを指定すればいいので簡単です。

まずはHTMLを記載しておきます。

<div class-"mainContents">
  <div class="box1">
    <img src="https://tnyk.jp/wp-content/uploads/2019/10/width100-center.jpg" alt="">
  </div>
</div>

見やすく理解しやすいように.mainContentsは、幅980px（paddingを両側20pxいれてます）で背景もグレーにしています。

.mainContents {
  max-width: 1000px;
  margin: 0 auto;
  background: #eee;
}

.box1 {
  position: relative; /* 中央寄せしたい要素の親タグにrelativeをつける */
  overflow: hidden;  /* はみ出した部分は表示しないようにする */
  height: 600px; /* 高さは固定値を入れる */
}

.box1 img {
  position: absolute;
  top: 50%; /* トップを基準に中央配置 */
  left: 50%; /* 左を基準に中央配置 */
  width: 1200px;
  height: 600px;

  /* ※1 */
  margin-top: -300px;
  margin-left: -600px;
}

※1について

position: absolute;で、topとleftを使った場合は、起点が要素の左上になるので、中央配置をするために画像の半分サイズをネガティブマージン（マージンにマイナスの値を指定すること）で実現できます。

しかし、ネガティブマージンを利用する方法は、要素のサイズが固定の場合しか使えないため、最近だとtransformを利用して設定することがほとんどです。

/* ※1の部分を以下に置き換える */
transform: translate(-50%, -50%);

こうすることで、中央配置したい要素のサイズが可変の場合（テキストなど）でも中央寄せできます。

また、どうしてもmarginは使いたくないという場合があれば、calcで対応することも可能です。

top: calc(50% - 300px);
left: calc(50% - 600px);

高さ可変の場合

高さ可変の場合は、padding-topを利用することが多いです。

HTMLもbox1クラスの要素に、varというクラスを追加しただけです。

<div class-"mainContents">
  <div class="box1 var">
    <img src="https://tnyk.jp/wp-content/uploads/2019/10/width100-center.jpg" alt="">
  </div>
</div>

CSSもpadding-topで高さを算出するだけです。

高さ可変の算出方法は、メインコンテンツの最大幅の時の要素の高さ/メインコンテンツの最大幅です。

今回の場合だと、要素の高さは600px、メインコンテンツの最大幅は1000pxなので、　600px / 1000px = 0.6 = 60%　となります。

念の為heightは0を指定します。

.box1.var {
  height: 0;
  padding-top: 60%;
}

backgroundを利用した方法

こちらも高さ固定と可変で変わりますが、基本的にはpositionと一緒のため解説は端折ります。

要素の背景として表示するため、画像をドラッグ・アンド・ドロップすることはできなくなります。

固定の場合

<div class-"mainContents">
  <div class="box2"></div>
</div>

.box2 {
  height: 600px;
  background: url(https://tnyk.jp/wp-content/uploads/2019/10/width100-center.jpg) center center no-repeat;
}

可変の場合

<div class-"mainContents">
  <div class="box2 var"></div>
</div>

.box2.var {
  height: 0;
  padding-top: 60%;
}

まとめ

backgroundを利用したほうがHTML,CSSともに簡潔に書くことはできますが、SEOの観点から考えるとタグがきちんと設定されてるpositionでやる方が良さそうかと思います。

逆に画像をドラッグ・アンド・ドロップで保存させたくない場合は、backgroundでやるのが良さそうですね。

用途によってうまく使い分けてみましょう。

See the Pen コンテンツ幅より大きい画像をセンター寄せ by tnyk35 (@tnyk35) on CodePen.0