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

CSSのobject-fitとobject-positionを使って画像を切り抜く方法

CSSのobject-fitプロパティとobject-positionプロパティを組み合わせることで、要素内に表示する画像を切り抜いたり、表示位置を細かく調整したりできます。レスポンシブデザインにおいて、画像のアスペクト比を保ちながらレイアウトに収めたい場合に非常に便利な機能です。

基本構文

CSSのobject-fitプロパティおよびobject-positionプロパティの構文は以下の通りです。

Selector {
    object-fit: /*値*/;
    object-position: /*値*/;
}

object-fitの主な値

  • cover: アスペクト比を維持したまま、要素全体を覆うように拡大・縮小します。はみ出た部分は切り取られます。
  • contain: 画像全体が要素内に収まるように拡大・縮小します。余白が生まれることがあります。
  • fill: 初期値。画像を要素のサイズに合わせて引き伸ばします（アスペクト比は無視されます）。
  • none: 画像をリサイズせず、元のサイズのまま表示します。
  • scale-down: noneとcontainのうち、より小さく表示される方が適用されます。

サンプルコード1：coverとcontainの違い

次の例では、同じ画像に対して「cover」と「contain」をそれぞれ適用し、表示の違いを確認できます。

<!DOCTYPE html>
<html>
<head>
<style>
img {
    object-fit: cover;
}
img:last-of-type {
    object-fit: contain;
}
</style>
</head>
<body>
cover
<img src="https://images.unsplash.com/photo-1611423837981-2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
<img src="https://images.unsplash.com/photo-1611423837981-2cba00ee7631?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb1.2.1&q=80&w=120" width="200" height="250"/>
contain
</body>
</html>

実行結果

上記のコードを実行すると、次のような結果が得られます。

CSSのobject-fitとobject-positionを使って画像を切り抜く方法

サンプルコード2：object-positionによる表示位置の調整

次の例では、object-fit: coverと組み合わせてobject-positionを使用し、画像の表示位置をピクセル単位で調整しています。

<!DOCTYPE html>
<html>
<style>
div {
    border: 1px solid blue;
    width:100%;
    height:300px;
}
img {
    float:left;
    width:50%;
    height:100%;
    object-fit:cover;
    object-position: 20px -10px;
}
</style>
<body>
<div >
<img src="https://images.unsplash.com/photo-1611800065908-233b597db552?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250" />
<img src="https://images.unsplash.com/photo-1612626256634-991e6e977fc1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=350&ixlib=rb1.2.1&q=80&w=250"/>
</div>
</body>
</html>

実行結果

上記のコードを実行すると、次のような結果が得られます。

CSSのobject-fitとobject-positionを使って画像を切り抜く方法

ウィンドウサイズ変更時の挙動

ブラウザのウィンドウサイズを変更すると、object-fitとobject-positionによる表示の変化をより明確に確認できます。

CSSのobject-fitとobject-positionを使って画像を切り抜く方法

  1. CSSのoverflow-anchorプロパティでスクロールアンカーを無効化する方法

    Webブラウザには、コンテンツの読み込み中にページが勝手にジャンプするのを防ぐための「スクロールアンカー（scroll anchoring）」という機能が標準で備わっています。しかし、場合によってはこのデフォルトの動作が邪魔になることもあります。そのようなときは、CSSのoverflow-anchorプロパティを使うことで、スクロールアンカーを無効化できます。 overflow-anchorプロパティとは overflow-anchorプロパティは、ブラウザが自動的に選択する「アンカーノード（基準となる要素）」の調整動作を制御します。指定できる値は以下の2つです。 auto：デフォルト値。ブ

  2. CSSとpicture要素でWebP画像をフォールバック表示する方法

    WebP形式とは？導入のメリット Webサイトで大量の画像を表示する場合には、圧縮効率に優れたWebP形式の採用をおすすめします。WebPはJPEGやPNGと比較して、同等の画質でありながらファイルサイズを大幅に小さくできるため、ページの読み込み速度向上やサーバー負荷の軽減、通信量の削減につながります。 しかし、古いブラウザの中にはWebPに対応していないものも存在します。そこで活躍するのが、HTML5の<picture>要素です。この要素を利用すれば、WebP非対応のブラウザに対して自動的にJPEGやPNGなどの代替画像（フォールバック）を表示できます。 <picture