CSS 画像の文書を更新

- 2021/10/16 時点の英語版に同期

1 files changed, 85 insertions, 96 deletions

diff --git a/files/ja/web/css/object-fit/index.md b/files/ja/web/css/object-fit/index.md
index f3cd681f5e..81c6393a75 100644
--- a/files/ja/web/css/object-fit/index.md
+++ b/files/ja/web/css/object-fit/index.md
@@ -3,105 +3,118 @@ title: object-fit
 slug: Web/CSS/object-fit
 tags:
   - CSS
-  - CSS プロパティ
   - CSS 画像
-  - object-fit
-  - リファレンス
+  - CSS プロパティ
   - レイアウト
+  - Reference
+  - css レイアウト
+  - object-fit
+  - recipe:css-property
   - 寸法
+browser-compat: css.properties.object-fit
 translation_of: Web/CSS/object-fit
 ---
-<div>{{CSSRef}}</div>
+{{CSSRef}}
+
+[CSS](/ja/docs/Web/CSS) の **`object-fit`** プロパティは、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。
 
-<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>
+要素のボックス内における置換要素の中身のオブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。
 
-<p>要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。</p>
+{{EmbedInteractiveExample("pages/css/object-fit.html")}}
 
-<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>
+```css
+object-fit: contain;
+object-fit: cover;
+object-fit: fill;
+object-fit: none;
+object-fit: scale-down;
 
-<h2 id="Syntax" name="Syntax">構文</h2>
+/* グローバル値 */
+object-fit: inherit;
+object-fit: initial;
+object-fit: revert;
+object-fit: unset;
+```
 
-<p><code>object-fit</code> プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。</p>
+`object-fit` プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。
 
-<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>
+- `contain`
+  - : 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、[レターボックス](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))表示になります。
+- `cover`
+  - : 置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
+- `fill`
+  - : 置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
+- `none`
+  - : 置換コンテンツは、拡大縮小されません。
+- `scale-down`
+  - : コンテンツは `none` または `contain` を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
 
-<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>
+## Formal definition
+
+{{cssinfo}}
+
+## Formal syntax
 
 {{csssyntax}}
 
-<h2 id="Example" name="Example">例</h2>
+## 例
 
-<h3 id="HTML">HTML</h3>
+<h3 id="Setting_object-fit_for_an_image">画像に object-fit を設定</h3>
 
-<pre class="brush: html">&lt;div&gt;
-  &lt;h2&gt;object-fit: fill&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/&gt;
+#### HTML
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/&gt;
+```html
+<section>
+  <h2>object-fit: fill</h2>
+  <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;h2&gt;object-fit: contain&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/&gt;
+  <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/&gt;
+  <h2>object-fit: contain</h2>
+  <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;h2&gt;object-fit: cover&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/&gt;
+  <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/&gt;
+  <h2>object-fit: cover</h2>
+  <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;h2&gt;object-fit: none&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/&gt;
+  <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/&gt;
+  <h2>object-fit: none</h2>
+  <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;h2&gt;object-fit: scale-down&lt;/h2&gt;
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/&gt;
+  <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-  &lt;img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/&gt;
+  <h2>object-fit: scale-down</h2>
+  <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo">
 
-&lt;/div&gt;</pre>
+  <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo">
+</section>
+```
 
-<h3 id="CSS">CSS</h3>
+#### CSS
 
-<pre class="brush: css">h2 {
+```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;
+  margin: 10px 0;
 }
 
 .narrow {
   width: 100px;
   height: 150px;
-  margin-top: 10px;
 }
 
 .fill {
@@ -123,45 +136,21 @@ img {
 .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>
-
-<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>
+```
+
+#### Result
+
+{{ EmbedLiveSample('Setting_object-fit_for_an_image', 500, 1100) }}
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- その他の画像関連 CSS プロパティ: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}
+- {{cssxref("background-size")}}