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

CSSのobject-positionプロパティとは？画像や動画の表示位置を自在に指定する方法

CSSのobject-positionプロパティは、画像や動画などの置換要素（replaced element）を、そのコンテンツボックス内のどの位置に表示するかを指定するためのプロパティです。特にobject-fitと組み合わせて使用することで、トリミングされた画像の見せ方を細かくコントロールできます。

object-positionの基本的な使い方

object-positionでは、水平方向と垂直方向の位置をそれぞれ指定します。

object-position: 水平位置 垂直位置;

指定できる値には以下のようなものがあります。

  • キーワード値： left / center / right（水平）、top / center / bottom（垂直）
  • パーセンテージ： 例：50% 50%（中央揃え）
  • 長さの値： 例：10px 20% のようにpxや%を組み合わせ可能

デフォルト値は 50% 50%、つまり要素の中央が基準となります。

サンプルコード

以下の例では、200×200pxのボックスに画像を配置し、object-fit: none; と object-position: 10px 20%; を指定して、画像の表示位置を調整しています。

<!DOCTYPE html>
<html>
<head>
<style>
img.demo {
    width: 200px;
    height: 200px;
    object-fit: none;
    object-position: 10px 20%;
    border: 2px dashed yellow;
}
</style>
</head>
<body>
<h2>デモ見出し</h2>
<img class="demo" src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="400" height="250">
<h2>Memcachedチュートリアル</h2>
<img src="https://www.tutorialspoint.com/memcached/images/memcached-mini-logo.jpg" alt="Memcached" width="300" height="250">
</body>
</html>

実行結果

CSSのobject-positionプロパティとは？画像や動画の表示位置を自在に指定する方法


ポイントまとめ

  • object-positionは、<img>や<video>などの中身がボックスからはみ出す・余る場合に、どの部分を見せるかを決めるプロパティです。
  • object-fit: cover; や none; と併用すると効果的で、サムネイル画像のトリミング位置の調整などによく使われます。
  • 主要なモダンブラウザ（Chrome、Firefox、Safari、Edge）すべてでサポートされています。
  1. CSSのrightプロパティとは？構文と使い方を実例付きで解説

    CSSのrightプロパティは、positionが指定された要素の水平方向の位置を設定するために使用します。基準となる包含ブロックの右端から、要素の右端までの距離を指定できます。 なお、rightプロパティはpositionプロパティがstatic以外（relative・absolute・fixed・sticky）のときにのみ有効になる点に注意してください。 構文 right: auto|length|initial|inherit; 指定できる値 auto … 初期値。位置の計算をブラウザに任せます。 length … pxやemなどの単位で距離を指定します。負の値も指定可能です。 ini

  2. CSSのcolorプロパティで文字色を設定する方法

    CSSを使用すると、要素のテキスト、ボーダー（枠線）、背景それぞれに対して自由に色を定義できます。その中でもcolorプロパティは、要素内のテキストの色を指定するために使われる基本的なプロパティです。基本構文CSSのcolorプロパティは、次のような形式で記述します。セレクタ {     color: /* 値 */; }値には、キーワード名（例：red、blue）、16進数カラーコード（例：#ff0000）、RGB値（例：rgb(255,0,0)）など、さまざまな形式が利用可能です。サンプルコード①：divとp要素への色指定以下の例では、div要素とp