【CSS】object-positionの使い方【img要素の画像配置設定】

スポンサーリンク
アイキャッチ 猫HTML/CSS
スポンサーリンク

前回はCSSで「object-fit」プロパティを使って、img要素などの置換要素に対してコンテンツをどのようにはめ込むかを設定しました。
よければこちらの記事もご覧になってください。

今回は置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介していきたいと思います。

スポンサーリンク

object-positionプロパティ

このプロパティは「iframe」「video」「img」など要素の中身(コンテンツ)を要素のどこに配置するか設定します。

先ほども説明あったようにコンテンツをどのようにはめ込むかは「object-fit」プロパティを設定します。

スポンサーリンク

値の設定について

値はこのように設定することができます。
object-fit: [左右] [上下]
初期値は真ん中の“50% 50%”が設定されています。

[左右]left、right、center
   もしくは left、right + 数値(単位付)
   もしくは 数値(単位付)のみ
[上下]top、bottom、center
   もしくは top、bottom + 数値(単位付)
   もしくは 数値(単位付)のみ

※ デフォルトで50%がそれぞれ設定されているので、片方省略も可能
例:object-fit: right もしくは、object-fit: bottom など

設定値だけ見てもイメージが湧きにくいと思いますので、
次は実際にコードを記述して、結果を見てみましょう。

スポンサーリンク

サンプル

それでは実際にソースコードを記述して配置を見てみましょう。
使用する画像はこちらです。

object-position サンプル画像
<p>右中央に表示</p>
<img src="img/01.jpg" class="right-center sample">

<p>中央下に表示</p>
<img src="img/01.jpg" class="center-bottom sample">

<p>左上に表示</p>
<img src="img/01.jpg" class="left-top sample">

<p>パーセント表記で設定(80%、20%)</p>
<img src="img/01.jpg" class="set-percentage1 sample">

<p>パーセント表記で設定(右から80%、下から20%)</p>
<img src="img/01.jpg" class="set-percentage2 sample">

<p>ピクセルで設定(50px、180px)</p>
<img src="img/01.jpg" class="set-pixel sample">
img{
    width: 400px;
    height: 300px;

    // imgのサイズを分かりやすくするため、background-color、
    // borderを設定し、object-fitはnoneを設定しています。
    background-color: #999;
    border: 1px solid #666;
    object-fit: none;
}

// 右中央
.right-center{
    object-position: right;
}

// 中央下
.center-bottom{
    object-position: bottom;
}

// 左上
.left-top{
    object-position: left top;
}

// パーセントで値を設定(80%, 20%)
.set-percentage1{
    object-position: 80% 20%;
}

// パーセントで値を設定(右から80%、下から20%)
.set-percentage2{
    object-position: right 80% bottom 20%;
}

// ピクセルで値を設定(50px, 180px)
.set-pixel{
    object-position: 50px 180px;
}

結果がこちらです。

右中央に表示
object-position確認 右、中央

中央下に表示
object-position確認 中央、下

左上に表示
object-position確認 左、上

パーセント表記で設定(80%、20%)
object-position確認 パーセント設定

パーセント表記で設定(右から80%、下から20%)
object-position確認 パーセント設定

ピクセルで設定(50px、180px)
object-position確認 ピクセル設定

最後の結果についてですが、img要素からはみ出ている部分は出力されていないことが分かります。
つまりimg要素の中で画像を配置しているので、img要素からはみ出ている赤枠部分は表示されず、トリミングされています。

トリミングされている箇所
スポンサーリンク

まとめ

今回は「object-position」プロパティをご紹介しました。
前回紹介した「object-fit」プロパティと合わせて使いこなしていきたいですね!

ただし、「object-fit」プロパティと同様IEにはどのバージョンでも現時点(2020年5月)では対応できていませんので、別途IE対応が必要なのは一緒ですね。
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

本ブログで一押しのオンラインスクールのご紹介♪




本ブログで一押しのオンラインスクール「Udemy」
筆者も利用しているスクールで、日頃の隙間時間に好きな講座が学べるので大活躍です♪

ジャンルが豊富で学びたい講座がきっとみつかる

AI・データサイエンスなど最先端のIT技術からプレゼンなどビジネススキルに関する講座まで15.5万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます

お手頃な価格帯

1講座あたり数千~数万円程度で実践的なスキルアップが可能です。
講座は一度購入すれば視聴期限なく受講でき、30日返金保証もついているので安心して始めることができます。

学びやすい多彩な機能

0.5~2倍の変速機能で自分のペースで受講が可能、専用アプリを使えばスマホからオフライン環境でも視聴が可能です!
また、講師に直接掲示板から質問ができるので疑問を解決し自学自習をサポートしてくれます。

購入前に視聴できますので、是非興味のある方は↓をクリックしてみてください。




HTML/CSSプログラミング
スポンサーリンク
nyanblog
タイトルとURLをコピーしました