SoyaBlog

これを見れば解決しそうや

HOME>CSS>置換要素の表示位置を指定するobject-positionについて解説
ブログ投稿日時：
ブログ更新日時：
置換要素の表示位置を指定するobject-positionについて解説

置換要素の表示位置を指定するobject-positionについて解説

  1. object-position とは
  2. object-position の指定方法
  3. object-position を キーワード で指定
  4. object-position を px で指定
  5. object-position を % で指定
  6. 今回のまとめ
1.

object-position とは

object-position とは、置換要素の表示位置を指定するプロパティです。

2.

object-position の指定方法

object-position の指定方法は主に 上下のみの指定、左右のみの指定、上下と左右をまとめて指定 の3つです。

.object-position {
  /* object-position: 上下のみの指定;  */
  object-position: top;
  object-position: bottom;

  /* object-position: 左右のみの指定;  */
  object-position: left;
  object-position: right;

  /* object-position:　左右の指定 上下の指定;  */
  object-position: right top;
  object-position: left bottom;
}

object-position で使用できる主な単位は キーワード、 px、 % の3つです。

3.

object-position を キーワード で指定

object-position の キーワード で使える値は下記の5つです。

キーワード内容
top上寄せで表示
bottom下寄せで表示
right右寄せで表示
left左寄せで表示
center中央で表示 (上下と左右の初期値)

それではそれぞれの指定方法と表示を見ていきましょう。

object-position: top; の指定方法と表示

<img src="sample.jpg" alt="サンプル画像">
img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: top;
}

元画像はこちら

タージ・マハル
HTMLとCSSの表示
タージ・マハル

上記のように object-position: top; を指定すると画像を上寄せで表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

object-position: right; の指定方法と表示

<img src="sample.jpg" alt="サンプル画像">
img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: right;
}

元画像はこちら

タージ・マハル
HTMLとCSSの表示
タージ・マハル

上記のように object-position: right; を指定すると画像を右寄せで表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

object-position: bottom; の指定方法と表示

<img src="sample.jpg" alt="サンプル画像">
img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: bottom;
}

元画像はこちら

タージ・マハル
HTMLとCSSの表示
タージ・マハル

上記のように object-position: bottom; を指定すると画像を下寄せで表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

object-position: left; の指定方法と表示

<img src="sample.jpg" alt="サンプル画像">
img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: left;
}

元画像はこちら

タージ・マハル
HTMLとCSSの表示
タージ・マハル

上記のように object-position: left; を指定すると画像を左寄せで表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

object-position: center; の指定方法と表示

<img src="sample.jpg" alt="サンプル画像">
img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;
  object-position: center;
}

元画像はこちら

タージ・マハル
HTMLとCSSの表示
タージ・マハル

上記のように object-position: center; を指定すると画像の中央を表示します。

※必要に応じてブラウザ幅を変えて見ることをおすすめします。

4.

object-position を px で指定

それでは object-position を px で指定した時の表示を見ていきましょう。

<div class="flame">
  <img src="sample.jpg" alt="サンプル画像">
</div>
.flame {
  width: 100%;
  height: 400px;
  background-color: white;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;

  /* background-position: 左からの位置 上からの位置; */
  object-position: 50px 80px;
}
HTMLとCSSの表示
カラフル

上記のように object-position: 50px 80px; で指定すると要素の左端から50px、要素の上端から80pxの位置に画像を表示します。

5.

object-position を % で指定

それでは object-position を % で指定した時の表示を見ていきましょう。

<div class="flame">
  <img src="sample.jpg" alt="サンプル画像">
</div>
.flame {
  width: 100%;
  height: 400px;
  background-color: white;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: none;

  /* background-position: 左からの位置 上からの位置; */
  object-position: 30% 20%;
}
HTMLとCSSの表示
カラフル

上記のように object-position: 30% 20%; で指定すると要素の左端から30%、要素の上端から20%の位置に画像を表示します。

6.

今回のまとめ

この記事では object-position について解説しました。

object-position とは、置換要素の表示位置を指定するプロパティです。

object-position の指定方法は主に 上下のみの指定、左右のみの指定、上下と左右をまとめて指定 の3つです。

また、object-position で使用できる主な単位は キーワード、 px、 % の3つです。

それぞれの内容を理解して使い分けていきましょう。

最後までお読みいただきありがとうございました。