Articles
CSS入門
`object-fit`と`object-position`プロパティ

`object-fit`と`object-position`プロパティ

この記事ではobject-fitとobject-positionプロパティについて説明します。

画像や動画などのオブジェクトの配置方法やCSSにおける記述の仕方を学べます。

YouTube Video

プレビュー用のHTML

css-object-fit-position.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-object-fit-position.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Object</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Object Fit And Object Position Properties</h2>
 20        </header>
 21        <article>
 22            <h3>object-fit : fill</h3>
 23            <section>
 24                <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.container-fill img {
 27    width: 100%;
 28    height: 100%;
 29    object-fit: fill;
 30}
 31</pre>
 32                <header><h4>HTML</h4></header>
 33<pre>
 34&lt;div class=&quot;container-fill&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 35    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 36&lt;/div&gt;
 37</pre>
 38                <header><h4>HTML+CSS</h4></header>
 39                <section class="sample-view">
 40                    <div class="container-fill" style="width: 150px; height: 100px;">
 41                        <img src="example.jpg" alt="Example Image">
 42                    </div>
 43                </section>
 44            </section>
 45        </article>
 46        <article>
 47            <h3>object-fit : contain</h3>
 48            <section>
 49                <header><h4>CSS</h4></header>
 50<pre class="sample">
 51.container-contain img {
 52    width: 100%;
 53    height: 100%;
 54    object-fit: contain;
 55}
 56</pre>
 57                <header><h4>HTML</h4></header>
 58<pre>
 59&lt;div class=&quot;container-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 60    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 61&lt;/div&gt;
 62</pre>
 63                <header><h4>HTML+CSS</h4></header>
 64                <section class="sample-view">
 65                    <div class="container-contain" style="width: 150px; height: 100px;">
 66                        <img src="example.jpg" alt="Example Image">
 67                    </div>
 68                </section>
 69            </section>
 70        </article>
 71        <article>
 72            <h3>object-fit : cover</h3>
 73            <section>
 74                <header><h4>CSS</h4></header>
 75<pre class="sample">
 76.container-cover img {
 77    width: 100%;
 78    height: 100%;
 79    object-fit: cover;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;div class=&quot;container-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
 85    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
 86&lt;/div&gt;
 87</pre>
 88                <header><h4>HTML+CSS</h4></header>
 89                <section class="sample-view">
 90                    <div class="container-cover" style="width: 150px; height: 100px;">
 91                        <img src="example.jpg" alt="Example Image">
 92                    </div>
 93                </section>
 94            </section>
 95        </article>
 96        <article>
 97            <h3>object-fit : none</h3>
 98            <section>
 99                <header><h4>CSS</h4></header>
100<pre class="sample">
101.container-none img {
102    width: 100%;
103    height: 100%;
104    object-fit: none;
105}
106</pre>
107                <header><h4>HTML</h4></header>
108<pre>
109&lt;div class=&quot;container-none&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
110    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
111&lt;/div&gt;
112</pre>
113                <header><h4>HTML+CSS</h4></header>
114                <section class="sample-view">
115                    <div class="container-none" style="width: 150px; height: 100px;">
116                        <img src="example.jpg" alt="Example Image">
117                    </div>
118                </section>
119            </section>
120        </article>
121        <article>
122            <h3>object-fit : scale-down</h3>
123            <section>
124                <header><h4>CSS</h4></header>
125<pre class="sample">
126.container-scale-down img {
127    width: 100%;
128    height: 100%;
129    object-fit: scale-down;
130}
131</pre>
132                <header><h4>HTML</h4></header>
133<pre>
134&lt;div class=&quot;container-scale-down&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
135    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
136&lt;/div&gt;
137</pre>
138                <header><h4>HTML+CSS</h4></header>
139                <section class="sample-view">
140                    <div class="container-scale-down" style="width: 150px; height: 100px;">
141                        <img src="example.jpg" alt="Example Image">
142                    </div>
143                </section>
144            </section>
145        </article>
146        <article>
147            <h3>object-fit : Example(Cover)</h3>
148            <section>
149                <header><h4>CSS</h4></header>
150<pre class="sample">
151.container-example-cover img {
152  width: 100%;
153  height: 100%;
154  object-fit: cover;
155}
156</pre>
157                <header><h4>HTML</h4></header>
158<pre>
159&lt;div class=&quot;container-example-cover&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
160    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
161&lt;/div&gt;
162</pre>
163                <header><h4>HTML+CSS</h4></header>
164                <section class="sample-view">
165                    <div class="container-example-cover" style="width: 150px; height: 100px;">
166                        <img src="example.jpg" alt="Example Image">
167                    </div>
168                </section>
169            </section>
170        </article>
171        <article>
172            <h3>object-fit : Example(Contain)</h3>
173            <section>
174                <header><h4>CSS</h4></header>
175<pre class="sample">
176.container-example-contain img {
177  width: 100%;
178  height: 100%;
179  object-fit: contain;
180}
181</pre>
182                <header><h4>HTML</h4></header>
183<pre>
184&lt;div class=&quot;container-example-contain&quot; style=&quot;width: 150px; height: 100px;&quot;&gt;
185    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
186&lt;/div&gt;
187</pre>
188                <header><h4>HTML+CSS</h4></header>
189                <section class="sample-view">
190                    <div class="container-example-contain" style="width: 150px; height: 100px;">
191                        <img src="example.jpg" alt="Example Image">
192                    </div>
193                </section>
194            </section>
195        </article>
196        <article>
197            <h3>object-fit Common Mistake Example</h3>
198            <section>
199                <header><h4>CSS</h4></header>
200<pre class="sample">
201.container-invalid {
202    width: 100px;
203    height: auto;
204    /* height: 150px; The height of the parent element is not specified */
205}
206
207.container-invalid img {
208    object-fit: cover;
209}
210</pre>
211                <header><h4>HTML</h4></header>
212<pre>
213&lt;div class=&quot;background-image-invalid&quot;&gt;
214    &lt;img src=&quot;example.jpg&quot; alt=&quot;Example Image&quot;&gt;
215&lt;/div&gt;
216</pre>
217                <header><h4>HTML+CSS</h4></header>
218                <section class="sample-view">
219                    <div class="container-invalid">
220                        <img src="example.jpg" alt="Example Image">
221                    </div>
222                </section>
223            </section>
224        </article>
225        <article>
226            <h3>object-position : one value</h3>
227            <section>
228                <header><h4>object-position: center;</h4></header>
229                <section class="sample-view" style="width: 550px; height: 250px;">
230                    <img class="object-position-center" src="example.jpg" alt="Example Image">
231                </section>
232                <header><h4>object-position: left;</h4></header>
233                <section class="sample-view" style="width: 550px; height: 250px;">
234                    <img class="object-position-left" src="example.jpg" alt="Example Image">
235                </section>
236                <header><h4>object-position: 70%;</h4></header>
237                <section class="sample-view" style="width: 550px; height: 250px;">
238                    <img class="object-position-70" src="example.jpg" alt="Example Image">
239                </section>
240                <header><h4>object-position: 50px;</h4></header>
241                <section class="sample-view" style="width: 550px; height: 250px;">
242                    <img class="object-position-50px" src="example.jpg" alt="Example Image">
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>object-position : two values</h3>
248            <section>
249                <header><h4>object-position: center center</h4></header>
250                <section class="sample-view" style="width: 550px; height: 250px;">
251                    <img class="object-position-center-center" src="example.jpg" alt="Example Image">
252                </section>
253                <header><h4>object-position: right top</h4></header>
254                <section class="sample-view" style="width: 550px; height: 250px;">
255                    <img class="object-position-right-top" src="example.jpg" alt="Example Image">
256                </section>
257                <header><h4>object-position: 75% 20%</h4></header>
258                <section class="sample-view" style="width: 550px; height: 250px;">
259                    <img class="object-position-75-20" src="example.jpg" alt="Example Image">
260                </section>
261                <header><h4>object-position: 50px 25px</h4></header>
262                <section class="sample-view" style="width: 550px; height: 250px;">
263                    <img class="object-position-50px-25px" src="example.jpg" alt="Example Image">
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>object-position: four values</h3>
269            <section>
270                <header><h4>object-position: left 10px top 20px</h4></header>
271                <section class="sample-view" style="width: 550px; height: 250px;">
272                    <img class="object-position-left-10-top-20" src="example.jpg" alt="Example Image">
273                </section>
274                <header><h4>object-position: right 15% bottom 30px</h4></header>
275                <section class="sample-view" style="width: 550px; height: 250px;">
276                    <img class="object-position-right-15-bottom-30" src="example.jpg" alt="Example Image">
277                </section>
278            </section>
279        </article>
280        <article>
281            <h3>object-position: mixed values</h3>
282            <section>
283                <header><h4>object-position: right 50%</h4></header>
284                <section class="sample-view" style="width: 550px; height: 250px;">
285                    <img class="object-position-right-50" src="example.jpg" alt="Example Image">
286                </section>
287            </section>
288        </article>
289        <article>
290            <h3>object-position and object-fit</h3>
291            <section>
292                <header><h4>object-fit: cover; object-position: right bottom;</h4></header>
293                <section class="sample-view" style="width: 550px; height: 250px;">
294                    <img class="object-position-right-bottom" src="example.jpg" alt="Example Image">
295                </section>
296                <header><h4>object-fit: contain; object-position: right;</h4></header>
297                <section class="sample-view" style="width: 550px; height: 250px;">
298                    <img class="object-position-right" src="example.jpg" alt="Example Image">
299                </section>
300            </section>
301        </article>
302    </main>
303</body>
304</html>

オブジェクト配置関連

object-fitプロパティ

CSSのobject-fitプロパティは、主に画像や動画などのコンテンツがそのコンテナ要素にどのようにフィットするかを制御するために使用されます。このプロパティを使うことで、指定した要素がどのようにサイズ変更され、見栄えよく配置されるかを柔軟に指定できるようになります。画像や動画が親要素に収まりきらない場合に、トリミングや拡大縮小を行って適切な表示に調整するために非常に便利です。

object-fitの値

fill（デフォルト値） 
1img {
2  object-fit: fill;
3}

fillはデフォルトの値で、画像や動画が親要素に強制的に引き伸ばされ、親要素の幅と高さに完全にフィットします。この場合、元のアスペクト比は無視されるため、画像が歪む可能性があります。

  • 親要素のサイズに完全に収まります。
  • アスペクト比を無視するため、画像や動画が縦横に引き伸ばされる可能性があります。
contain 
1img {
2  object-fit: contain;
3}

containは、アスペクト比を保持しつつ、コンテンツ全体が親要素内に収まるようにサイズ変更されます。親要素のサイズを超えることはなく、縦横どちらかに余白が発生することがあります。

  • コンテンツ全体が表示されます。
  • 元のアスペクト比を維持するため、余白（letterboxやpillarbox効果）ができることがあります。
cover 
1img {
2  object-fit: cover;
3}

coverは、アスペクト比を保持したまま、親要素を完全に覆うようにコンテンツをサイズ変更します。親要素にフィットするために、コンテンツの一部がトリミングされることがありますが、要素全体がコンテナを埋めるため、隙間は発生しません。

  • コンテンツが親要素を完全に覆います。
  • 元のアスペクト比を維持しつつ、トリミングされることがあります。
  • 背景画像やヒーローセクションの画像などでよく使われます。
none 
1img {
2  object-fit: none;
3}

noneは、画像や動画の元のサイズとアスペクト比を維持したまま表示します。親要素のサイズに収めるために調整されることはなく、必要に応じてコンテンツが溢れます。

  • コンテンツの元のサイズが維持されます。
  • 親要素にフィットさせるためのサイズ変更は行われません。
scale-down 
1img {
2  object-fit: scale-down;
3}

scale-downは、noneとcontainの動作を組み合わせた値です。コンテンツが親要素に収まる場合はnoneと同じ動作をしますが、コンテンツが大きすぎる場合はcontainの動作を適用し、親要素に収まるように縮小されます。

  • コンテンツが親要素よりも大きければ縮小されます。
  • 小さい場合は元のサイズのまま表示されます。

使用例

背景画像を親要素にフィットさせる

例えば、レスポンシブデザインを意識して、画像を画面全体に広げたい場合には、coverを使用するのが一般的です。次のコードでは、画像を親要素にしっかりフィットさせ、トリミングされても構わない場合の例です。

 1<div class="background-image">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.background-image img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: cover;
10}
11</style>

この場合、画像は親要素を完全に覆い、どのスクリーンサイズでも美しいレイアウトが保たれます。アスペクト比が異なる場合、一部の画像は見えなくなる可能性がありますが、デザインに適した見せ方を実現します。

アスペクト比を維持して画像を表示

次に、画像全体をアスペクト比を保ちながら親要素に収めたい場合は、containが適しています。

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container img {
 7  width: 100%;
 8  height: 100%;
 9  object-fit: contain;
10}
11</style>

この例では、画像がコンテナに収まるように縮小され、余白が発生しますが、元の画像が歪まずに表示されます。

よくある間違い

object-fitを使用する際の一般的な間違いとして、親要素のサイズが設定されていないケースがあります。object-fitはあくまでコンテンツを親要素にフィットさせるためのプロパティなので、親要素自体のサイズが明確でないと期待通りの効果が得られません。親要素にwidthやheightが適切に設定されていることを確認しましょう。

例えば、次のコードでは、親要素の高さが指定されていないため、object-fitが意図した通りに機能しません。

 1<div class="image-container">
 2  <img src="example.jpg" alt="Example Image">
 3</div>
 4
 5<style>
 6.image-container {
 7  width: 100%;
 8  /* height: 150px; the parent element's height is not specified */
 9}
10
11.image-container img {
12  object-fit: cover;
13}
14</style>

この場合、親要素に高さを指定するか、フレックスボックスやグリッドレイアウトを使用してレイアウト全体を調整する必要があります。

object-fitを使うべきシチュエーション

object-fitは、特にレスポンシブデザインや、さまざまなスクリーンサイズに対応するウェブサイトにおいて重要です。例えば、次のようなケースで役立ちます。

  • 画像や動画が異なるデバイスで正しく表示されるように調整したい場合
  • トリミングを許容しつつ、背景画像などを全画面表示にしたい場合
  • 画像のアスペクト比を維持しながら、親要素に収めたい場合
  • ギャラリーなどで、画像のサイズを一貫性を持って表示したい場合

これらの状況でobject-fitを使用すると、デザインの整合性が保たれ、ユーザー体験を向上させることができます。

まとめ

object-fitは、ウェブページ内の画像や動画を親要素に対してどのように表示するかを柔軟にコントロールできる強力なCSSプロパティです。fill、contain、cover、none、scale-downといった異なる値を使用することで、さまざまなデザイン要件に対応できます。正しい使い方を理解し、適切な場面で使用することで、視覚的に美しいレイアウトを実現することができます。

object-positionプロパティ

CSSのobject-positionプロパティは、要素内に配置された画像やビデオなどのコンテンツの表示位置を制御するために使用されます。object-positionを使うと、コンテンツを特定の位置に配置し、レイアウトに合った視覚的な効果を提供することができます。

object-positionの概要

object-positionは、主に<img>タグや<video>タグなどのメディア要素に適用されます。このプロパティは、メディアがそのコンテナ内でどの位置に表示されるかを制御します。object-fitと組み合わせて使うことが多く、画像やビデオが枠のサイズに対してどのようにフィットするかを設定するobject-fitに対し、object-positionはコンテンツの表示位置を調整します。

値の指定方法

object-positionは、1つ、2つ、または4つの値で位置を指定できます。ただし、４つの値を指定する方法は、古いブラウザでは対応していない可能性があります。

1つの値の指定

値を1つだけ指定した場合、その値は水平方向（X軸）の位置として解釈され、垂直方向（Y軸）は自動的にcenter（中央）になります。

  • object-position: left;と指定した場合、左に配置されます。
  • object-position: 70%;と指定した場合、横方向70%、縦方向中央に配置されます。
  • object-position: 50px;と指定した場合、横から50px、縦方向中央に配置されます。

2つの値の指定

2つの値を指定すると、水平方向（X軸）と垂直方向（Y軸）の位置を個別に設定できます。

  • object-position: center center;と指定した場合、中央に配置されます。
  • object-position: right top;と指定した場合、右上に配置されます。
  • object-position: 75% 20%;と指定した場合、横75%、縦20%の位置に配置されます。
  • object-position: 50px 25px;と指定した場合、左から50px、上から25pxの位置に配置されます。

4つの値の指定

4つの値を指定することで、leftやtopなどのキーワードとそのオフセットを組み合わせた、より詳細な位置指定が可能です。

1object-position: <horizontal-keyword> <horizontal-offset> <vertical-keyword> <vertical-offset>;
  • object-position: left 10px top 20px;と指定した場合、左から10px、上から20pxの位置に配置されます。
  • object-position: right 15% bottom 30px;と指定した場合、右から15%、下から30pxの位置に配置されます。
値の指定形式

object-positionでは、次の形式の値を指定することが可能です。

  • キーワードとして、top, right, bottom, left, centerを指定できます。
  • 50%のようにパーセンテージや、pxなどの単位を用いて指定できます。

例えば、このように使用できます。

1img {
2    object-position: 50% 50%; /* Center the image */
3}
4
5video {
6    object-position: left top; /* Align to the top left */
7}
キーワードとパーセンテージの組み合わせ

キーワードとパーセンテージを混在させることも可能です。

1img {
2    object-position: right 50%;
3}
  • この例では、画像が右端に配置され、垂直方向は50%（中央）に配置されます。柔軟な位置調整が必要な場合、この組み合わせは非常に便利です。

object-fitとの組み合わせ

object-positionは、通常object-fitと一緒に使用されることが多いです。object-fitは、画像やビデオが枠に対してどのようにリサイズされるかを決定します。例えば、object-fit: coverを使用すると、画像が枠に収まるようにトリミングされ、object-positionで指定した位置に従って配置されます。

1img {
2    object-fit: cover;
3    object-position: right bottom;
4}
  • この例では、画像がコンテナ全体に広がるように表示され、コンテンツの右下部分が表示されます。
object-fitの値と組み合わせた例

object-fitの値には次のような値を指定できます。

  • fill: 画像が歪む可能性がありますが、コンテナ全体にフィットさせます。
  • contain: 画像全体が表示され、アスペクト比を保ちます。
  • cover: コンテナに収まるようにトリミングされ、アスペクト比が維持されます。
  • none: 画像はその元のサイズで表示されます。

例えば、object-fit: containを使用すると、画像全体が表示され、object-positionで指定した位置に従って配置されます。

1img {
2    object-fit: contain;
3    object-position: right;
4}

この設定では、画像がコンテナの右側に配置され、画像全体が表示されます。

応用的な使い方

object-positionは単純な位置調整だけでなく、視覚効果を高めるために様々なシナリオで応用できます。

画像の一部を強調する

画像全体を表示するのではなく、特定の部分に焦点を当てたい場合に有効です。object-fitをcoverに設定し、object-positionで特定の領域にフォーカスします。

1img {
2    object-fit: cover;
3    object-position: 25% 75%;
4}
  • この例では、画像の左下部分が表示され、重要な部分が強調されます。
背景にビデオを使用する場合

object-positionは、ビデオを背景として使用する場合にも活躍します。特定の位置にビデオを配置して、ページ全体のデザインと一貫性を持たせることができます。

1video {
2    object-fit: cover;
3    object-position: center top;
4}
  • この設定では、ビデオがページ全体にフィットし、上部中央に配置されます。

よくある問題と解決策

object-positionを使う際、いくつかの問題が発生することがあります。ここではよくある問題とその解決策を紹介します。

画像の一部が切れてしまう

object-fit: coverを使用している場合、画像がコンテナに収まるようにトリミングされることがあります。この場合、object-positionで表示位置を調整することで、重要な部分が表示されるようにできます。

1img {
2    object-fit: cover;
3    object-position: center;
4}
画像の位置が期待通りでない

パーセンテージ指定が直感的でない場合があります。コンテナのサイズやアスペクト比を考慮し、異なる値で試行錯誤することが必要です。デベロッパーツールを使用してリアルタイムで調整すると効果的です。

まとめ

object-positionは、メディア要素を自由に配置するための強力なツールです。object-fitとの組み合わせにより、デザインに応じた柔軟なレイアウトが可能になります。キーワード、パーセンテージ、長さの単位などを使いこなして、様々な場面で視覚的な効果を最大化しましょう。

YouTubeチャンネルでは、Visual Studio Codeを用いて上記の記事を見ながら確認できます。 ぜひYouTubeチャンネルもご覧ください。

YouTube Video

`overflow`と`contain`プロパティ