サイズ不定の画像や動画を画面サイズ目一杯に貼り付けたい

Question

前提・実現したいこと

(なるべくであれば)CSSのみを使って、画像や動画を常に画面サイズ目一杯に貼り付けたいと思っています。

画像や動画については外部から指定しますので、サイズは不定です。

このことから、次の二つの問題が出てきます。

1. 画面領域よりおおきいサイズの画像または動画が指定されたときは、画面サイズ目一杯まで縮小する
2. 画面領域よりちいさいサイズの画像または動画が指定されたときは、画面サイズ目一杯まで拡大する

発生している問題

あちこちのサイトの例を探して、なんとか1のみを実現するようなCSSを書くことはできました(該当の要素は常にid="display"のdivの下にid="content"として配置されます)。

#display img, #display video,  #display audio{
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  transform: translate(-50%, -50%);
}

ただ、2を同時に実現する方法に全く見当がついていません(コンテンツのサイズが横長なのか縦長なのか分かっていれば、width: 100%またはheight: 100%で対応できるのですが)。

試したこと

苦肉の策として、JavaScriptを使って以下のコードを毎秒適用するようにしました。

    let content = document.getElementById("content");
    if(content){
      let l;
      let s = false;
      if(content.naturalHeight == content.naturalWidth){
        if(window.innerHeight == window.innerWidth){
          s = true;
        }else{
          l = window.innerHeight > window.innerWidth;
        }
      }else{
        l = content.naturalHeight < content.naturalWidth;
      }
      content.style.width = s || l ? "100%" : "";
      content.style.height = !s && l ? "" : "100%";
    }
  }

しかしながら、これだけだと横長のウィンドウに横長の画像を指定したときなど、一部の条件下でコンテンツが引き伸ばされてしまうことを確認しています。

確認の工数的にすべての画像・動画をチェックしきれないことからも、計算がこれ以上複雑になると自分としても理解が難しくなるという点からも、なるべくならCSSだけで同様のことができないか と考えています。

ソースコード全文

弊NPOのリポジトリで運用しているCastBackgroundというプログラムの一部です。
CSSはsrc/index.css、JavaScriptはsrc/control.jsを一部改変して掲載しています。

• side-beach-city/CastBackground: StreamYardなどでのタブ共有用背景

補足情報（FW/ツールのバージョンなど）

ブラウザ：Google Chrome バージョン: 88.0.4324.104（Official Build） （64 ビット）
※ 配信用の画面に用いるという性質上、当面は他のブラウザはサポート対象外として考えています。

Answer 1

【object-fit - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

【1行追加でOK！CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス】
https://www.webcreatorbox.com/tech/object-fit

Comments

[TakamiChie]

object-fit！そんなプロパティがあるのですね。ありがとうございます。