object-positionプロパティの説明
CSSのobject-positionプロパティは、ボックスの中に配置されるオブジェクトの位置を指定します。具体的には、画像や動画などの置換要素がボックスに配置される祭に、その位置を調整する機能を持ちます。
例えば、CSSで<img>要素のサイズ指定を行った場合、それは画像自体の寸法を決めているのではなく、コンテンツを収めるボックスの寸法を定義していることになります。画像は、あくまで置換要素としてボックスの中に流し込まれるもので、object-positionは画像が配置される座標を変更したい場合に有効となります。
ボックスの中に配置されるオブジェクトのアスペクト比やトリミングの方式を変更したい場合は、object-fitを活用して下さい。
object-positionに指定できる値
<position>- 要素のボックスに対する位置を表す値です。二次元の座標や寸法に対する割合を、1つから4つの値で定義します。これは相対値または絶対値のオフセット値です。
object-positionの使い方とサンプルコード
object-positionプロパティの構文は以下の通りです。
/* <position>値 */
object-position: top left;
object-position: bottom right;
object-position: center center;
object-position: top 10px;
object-position: top 10px left 5%;
/* グローバル値 */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: unset;
object-positionの実例
それでは実際にobject-positionプロパティの書き方を見ていきましょう。以下の例は、CSSで<img>要素のサイズを引き伸ばした上で、画像を元のサイズで読み込んでいます。つまり、object-fitの値はnoneです。
HTMLの要素は、それだけで四角いボックスを生成します。その中に配置された画像は、本来ボックスの中央に配置されますが、この配置位置を変更したものを比較してみます。
<div class="samp_box">
<div class="op_1">
<h2>object-position: top left;</h2>
<img src="/images/sample_square_100.png" alt="サンプル画像">
</div>
<div class="op_2">
<h2>object-position: bottom right;</h2>
<img src="/images/sample_square_100.png" alt="サンプル画像">
</div>
<div class="op_3">
<h2>object-position: 10px 10px;</h2>
<img src="/images/sample_square_100.png" alt="サンプル画像">
</div>
<div class="op_4">
<h2>object-position: bottom 10px right 10px;</h2>
<img src="/images/sample_square_100.png" alt="サンプル画像">
</div>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box img {
width: 100%;
height: 150px;
border: 1px solid #333;
background: #fff;
object-fit: none;
}
.op_1 img {
object-position: top left;
}
.op_2 img {
object-position: bottom right;
}
.op_3 img {
object-position: 10px 10px;
}
.op_4 img {
object-position: bottom 10px right 10px;
}
画像を要素の中央に配置する
ここまでの内容を理解すると、要素が生成するボックスと画像自体の配置を切り離して扱えることが分かります。これを利用すれば、今まで画面の中央に画像を寄せる方法に悩んでいたことが嘘のように解決します。
以下の内容は、<img>要素のみで実現しています。ボックスの横幅を可変式にして中央に画像を配置しています。これはボックスのサイズやアスペクト比がいかなるものであっても、画像を中央に配置できることを意味します。実は既定値ではこれと同じ方法で配置されますが、object-fitによる自動調整が働くために画像の寸法が変わってしまうのです。
さらに、サンプルでは<img>要素そのものに背景画像を配置しています。このような応用が利くのも、コンテナとオブジェクトを分けて考える時の利点です。resizeに対応しているブラウザであれば、コンテナの横幅を変更できます。画像が中央に寄ったまま移動するので確認してみましょう。
<div class="samp_box">
<div>
<h2>object-position: center center;</h2>
<img src="/images/sample_square_100.png" alt="サンプル画像">
</div>
</div>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem;
background: #eee;
resize: horizontal;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box img {
width: 100%;
height: 200px;
border: 1px solid #333;
background: url(/images/sample_photo_1200x630.jpg) center no-repeat;
object-fit: none;
object-position: center center;
}