1. Qiita
  2. 投稿
  3. CSS

画像や動画のアスペクト比を保ったまま枠内に配置する

  • 2
    いいね
  • 0
    コメント

画像や動画のアスペクト比を保ちながら背景や可変サイズの枠全体を埋めるメモです。
画像は背景に限定する場合background-sizeで簡単に出来るのですが、サムネイルにも使えるように今回は使いませんでした。Youtubeは黒枠に苦労して最初javascriptを使っていたんですけど、いろいろ試したらもモダンブラウザならCSSだけでも出来そうです:relaxed:

ちなみに、スマホは動画を自動再生すると通信料がアレになるので画像に変えたりした方がよさそうです。サンプルは自動的に再生されます。

画像の場合

画像やVideoタグの場合はobject-fitcoverを指定するとbackground-size:coverと同じようになりますが、残念なことにまだIEが対応してないみたいです。

:mushroom: デモページ

/* IEは未サポート将来的にはこれになるかも */
#test1 {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 2px solid #000;
}
#test1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

IEに対応する場合はこんなかんじ。元の画像サイズ以下には縮小されません。

#test2 {
    width: 100%;
    height: 400px;
    overflow: hidden;
    border: 2px solid #000;
}
#test2 img {
    position: relative;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

videoタグの場合

:mushroom: デモページ

videoタグの場合は画像と同じやり方で出来ます。
画像2と同じ方法で画面全体に背景として表示するようにしました。元のサイズ以下に縮小されませんが次のYoutubeでも使ってるvw/vhをwidth/heightに使うと画面サイズに合わせられます。

#video1 {
    z-index: -1;
    position: fixed;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Youtubeの場合

:mushroom: デモページ

YoutubeのiframeAPIを使う場合ですが画像と同じやり方だと黒い余白が入ってしまうので、動画のアスペクト比で最小サイズを計算します。サンプルは16:9の動画を配置する場合です。全体の背景にする場合はIE9↑ですがvw/vhのおかげでjavascriptを使わないでも出来ました(ฅ'ω'ฅ)
100vwは表示領域の横幅100%、100vhは縦幅100%で、例えば50vwだと横幅の半分です。

#youtube1 {
    z-index: -1;
    position: fixed;
    /* 真ん中に配置する */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    /* 最小は縦幅に動画のアスペクト比をかける 9/16の数字 */
    min-width: 177.77vh;
    height: 100vh;
    /* 最小は横幅に動画のアスペクト比をかける 16/9の数字 */
    min-height: 56.25vw;
}

元のサイズ以下にしたくない場合メディアクエリで上書きをして出来ましたがcalcでもっとスッキリ出来るのでしょうか…?

@media (max-width: 1280px){
    #youtube1 {
        min-height: 720px;
    }
}
@media (max-height: 720px){
    #youtube1 {
        min-width: 1280px;
    }
}