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

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.24

今回は置換要素に対して、コンテンツをどこに配置するかを設定する「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 など

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

サンプル

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

<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;
}

結果がこちらです。

右中央に表示

中央下に表示

左上に表示

パーセント表記で設定（80%、20%）

パーセント表記で設定（右から80%、下から20%）

ピクセルで設定（50px、180px）

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

まとめ

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

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

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

nyanblog2222.com

2020.05.27

投稿 【CSS】object-positionの使い方【img要素の画像配置設定】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。

画像の縦横比を固定する方法で、cssに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定のサイズで画像を配置することができます。
他にも「object-fit」プロパティを使うことで、どのように配置するか設定することができます。

今回は「object-fit」プロパティの使い方と設定値の内容を詳しく紹介していきたいと思います。

object-fitプロパティ

このプロパティは置換要素である、「iframe」、「video」、「img」など要素の中身（コンテンツ）をどのようにはめ込むかを設定します。

また、コンテンツをどのように配置するかは「object-position」プロパティを使用します。

値の設定について

object-fitプロパティは複数の値を設定することができます。
設定の内容を表にまとめてみました。
要素=img、コンテンツ=画像を見立てると、分かりやすいと思います。

サンプル

それでは実際に試してみましょう。
使用するのは、こちらの画像です。

さっそく、HTMLとCSSを設定してみましょう。

<p>cover</p>
<img src="img/01.jpg" class="cover">

<p>contain</p>
<img src="img/01.jpg" class="contain">

<p>fill</p>
<img src="img/01.jpg" class="fill">

<p>none</p>
<img src="img/01.jpg" class="none">

<p>scale-down</p>
<img src="img/01.jpg" class="scale-down">

img{
    width: 180px;
    height: 60px;

    // 左端に寄せてサイズを見やすくしたかったので、設定
    object-position: left;

    // imgのサイズを分かりやすくするため、background-colorを設定
    background-color: #999;
}

.cover {
    object-fit: cover;
}

.contain {
    object-fit: contain;
}

.fill {
    object-fit: fill;
}

.none {
    object-fit: none;
}

.scale-down {
    object-fit: scale-down;
}

結果がこちらです。

cover
縦横比そのまま、画像の上下トリミング

contain
縦横比そのまま、要素の右側が空いた状態

fill
画像全体をimg要素のサイズに合わせて表示。
画像が押しつぶされたような見た目。

none
画像をimg要素のサイズに合わせて一部分切り取っている。

scale-down
このサンプルでは、containが適用されています。

このように値「contain」「cover」「none」「scale-down」を使えばアスペクト比を変わらずコンテンツを設定することができます。
状況に応じて使ってみてください。

ただし、このプロパティは残念ながらIEには対応しておりません。
また、このプロパティを対応させるためには、cssかHTMLの属性でサイズを設定する必要があります。
object-fitプロパティが対応されていない！状況に陥りましたら、まずはサイズが設定されているかを確認してみてください。

まとめ

今回はobject-fitプロパティの使い方をご紹介しました。
要素のサイズさえ指定できれば値の設定も簡単なので、使いやすいかと思います。

ただ、先述しましたようにIEでは、現在（2020年5月）使用することができません。別途対策が必要になりますね！
IE対応する方法として「object-fit-images」について以下の記事で紹介していますので、宜しければご覧ください♪

【CSS】object-fit,object-positionのIE対応【object-fit-images】

CSSのobject-fit、object-positionプロパティはIEに対応していません。なので、object-fit-imagesを使用して、IEに対応させる方法を紹介します！　object-fit、object-positionの使い方については前記事で触れていますので、良かったら一緒にどうぞ♪

nyanblog2222.com

2020.05.27

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

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.26

また、こちらの記事も良かったら覗いてみてください♪

投稿 【CSS】object-fitの使い方【img要素の縦横比固定方法】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。