このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

object-position”プロパティ:置換要素のコンテンツの配置CSS3で追加

記事Oct. 13th,2021
置換要素のコンテンツのボックスの中での配置位置を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 object-position: 50% 50%;
適用対象 置換要素
継承 No
パーセント値 要素の横幅と高さに依存
計算値 指定したキーワード
アニメーション 繰り返し可能なリスト

object-position”プロパティは置換要素のコンテンツのボックスの中での配置位置を指定するプロパティです。

置換要素のコンテンツが要素のコンテント・ボックスを完全に覆わない場合、余った空間には要素の背景色が表示されます。置換要素のコンテンツがコンテント・ボックスよりも大きくなる場合にはコンテント・ボックスからはみ出すことはなく、はみ出す部分は常に切り取られます。

サンプルコード

img { object-position: top right;}

説明
<position> left”、“center”などのキーワード値と<length-percentage>”値の組み合わせで配置位置を指定
共通キーワード

使用例

キーワード値で指定する

img {
object-fit: none;
object-position: top;
animation: 5s linear infinite SampleRotation;
}
img {
object-fit: none;
object-position: right;
border: 2px solid;
}
img {
object-fit: none;
object-position: bottom;
border: 2px solid;
}
img {
object-fit: none;
object-position: left;
border: 2px solid;
}
img {
object-fit: none;
object-position: center;
border: 2px solid;
}
img {
object-fit: none;
object-position: top left;
border: 2px solid;
}
img {
object-fit: none;
object-position: bottom right;
border: 2px solid;
}

<length>”値で指定する

img {
object-fit: none;
object-position: 50px 50px;
border: 2px solid;
}

<percentage>”値で指定する

img {
object-fit: none;
object-position: 25% 25%;
border: 2px solid;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク