diff options
Diffstat (limited to 'files/ja/web/css/object-fit/index.html')
| -rw-r--r-- | files/ja/web/css/object-fit/index.html | 169 |
1 files changed, 169 insertions, 0 deletions
diff --git a/files/ja/web/css/object-fit/index.html b/files/ja/web/css/object-fit/index.html new file mode 100644 index 0000000000..42e6f068cd --- /dev/null +++ b/files/ja/web/css/object-fit/index.html @@ -0,0 +1,169 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS プロパティ + - CSS 画像 + - object-fit + - リファレンス + - レイアウト + - 寸法 +translation_of: Web/CSS/object-fit +--- +<div>{{CSSRef}}</div> + +<p><a href="/ja/docs/Web/CSS">CSS</a> の <strong><code>object-fit</code></strong> プロパティは、<a href="/ja/docs/Web/CSS/Replaced_element">置換要素</a>、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。</p> + +<p>要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。</p> + +<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> + +<p class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<p><code>object-fit</code> プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。</p> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code>contain</code></dt> + <dd>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、<a href="https://ja.wikipedia.org/wiki/%E3%83%AC%E3%82%BF%E3%83%BC%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9_(%E6%98%A0%E5%83%8F%E6%8A%80%E8%A1%93)">レターボックス</a>表示になります。</dd> + <dt><code>cover</code></dt> + <dd>置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。</dd> + <dt><code>fill</code></dt> + <dd>置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。</dd> + <dt><code>none</code></dt> + <dd>置換コンテンツは、拡大縮小されません。</dd> + <dt><code>scale-down</code></dt> + <dd>コンテンツは <code>none</code> 又は <code>contain</code> を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。</dd> +</dl> + +<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div> + <h2>object-fit: fill</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> + + <h2>object-fit: contain</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> + + <h2>object-fit: cover</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> + + <h2>object-fit: none</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> + + <h2>object-fit: scale-down</h2> + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> + + <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> + +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">h2 { + font-family: Courier New, monospace; + font-size: 1em; + margin: 1em 0 0.3em; +} + +div { + display: flex; + flex-direction: column; + flex-wrap: wrap; + align-items: flex-start; + height: 940px; +} + +img { + width: 150px; + height: 100px; + border: 1px solid #000; +} + +.narrow { + width: 100px; + height: 150px; + margin-top: 10px; +} + +.fill { + object-fit: fill; +} + +.contain { + object-fit: contain; +} + +.cover { + object-fit: cover; +} + +.none { + object-fit: none; +} + +.scale-down { + object-fit: scale-down; +} +</pre> + +<h3 id="Output" name="Output">出力結果</h3> + +<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> + +<h2 class="cleared" id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("css.properties.object-fit")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}</li> + <li>{{cssxref("background-size")}}</li> +</ul> |