CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのobject-fitプロパティで画像や動画をコンテナにフィットさせる方法

CSSのobject-fitプロパティを使うと、画像(<img>)や動画(<video>)を指定したコンテナのサイズに合わせてリサイズできます。アスペクト比を維持したまま表示領域に収めたり、領域全体を埋めるように拡大・縮小したりできるため、レスポンシブデザインにおいて非常に便利なプロパティです。

object-fitの主な値

  • fill(既定値): コンテナに合わせて画像を引き伸ばします。アスペクト比は維持されません。
  • contain: アスペクト比を維持したまま、画像全体がコンテナ内に収まるように表示されます。
  • cover: アスペクト比を維持しつつ、コンテナ全体を覆うように表示されます。はみ出た部分は切り取られます。
  • none: リサイズを行わず、画像を元のサイズのまま表示します。
  • scale-down: noneとcontainのうち、より小さく表示される方が適用されます。

使用例

以下のコードを実行すると、object-fit: cover;によって、縦長のコンテナ内でも画像がアスペクト比を保ったまま自然に表示されることが確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .myimg {
        width: 250px;
        height: 350px;
        object-fit: cover;
      }
    </style>
  </head>
  <body>
    <h2>SWIFT</h2>
    <img class="myimg"
        src="https://www.tutorialspoint.com/assets/videos/courses/67/images/course_67_image.png"
        alt="Python Data Science" width="300" height="200">
  </body>
</html>

補足：object-positionとの組み合わせ

object-fit: cover;を使用すると、はみ出た部分が中央を基準に切り取られます。表示位置を調整したい場合は、object-positionプロパティを併用しましょう。例えばobject-position: top;と指定すれば、画像の上部を基準に表示できます。

  1. CSSのwriting-modeプロパティ徹底解説！テキストを縦書き・横書きにする方法

    writing-modeプロパティとは CSSのwriting-modeプロパティは、テキストの行を水平方向にレイアウトするか、垂直方向にレイアウトするかを指定するためのプロパティです。日本語の縦書きのように、上から下へ文字を読ませるレイアウトも簡単に実現できます。 基本構文 writing-mode: horizontal-tb | vertical-rl | vertical-lr; 指定できる主な値 horizontal-tb … 行が上から下へ流れる標準的な横書き表示（初期値） vertical-rl … 行が右から左へ流れる縦書き表示。日本語や中国語などの縦組みレイアウトに適し

  2. CSSのpointer-eventsプロパティとは？使い方をコード例で解説

    pointer-eventsプロパティとは CSSのpointer-eventsプロパティは、要素に対してポインターイベントが発生した際に、その要素がアクション（反応）を行うかどうかを指定するためのプロパティです。ポインターイベントは、マウスのクリック、タッチ操作、スタイラスペンなど、さまざまな入力デバイスによって発生します。 このプロパティを活用すると、リンクやボタンへのクリック・ホバー操作を無効化したり、逆に有効化したりできます。主な値は以下のとおりです。 auto：デフォルトの動作。要素が通常どおりポインターイベントに反応します。 none：要素がポインターイベントに反応しなくなります