From 7e6441ff570f21d62937045a7366effe282323da Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 00:20:03 +0900 Subject: CSS_Images の各ファイルの .html → .md 変換 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/object-fit/index.html | 167 --------------------------------- files/ja/web/css/object-fit/index.md | 167 +++++++++++++++++++++++++++++++++ 2 files changed, 167 insertions(+), 167 deletions(-) delete mode 100644 files/ja/web/css/object-fit/index.html create mode 100644 files/ja/web/css/object-fit/index.md (limited to 'files/ja/web/css/object-fit') diff --git a/files/ja/web/css/object-fit/index.html b/files/ja/web/css/object-fit/index.html deleted file mode 100644 index f3cd681f5e..0000000000 --- a/files/ja/web/css/object-fit/index.html +++ /dev/null @@ -1,167 +0,0 @@ ---- -title: object-fit -slug: Web/CSS/object-fit -tags: - - CSS - - CSS プロパティ - - CSS 画像 - - object-fit - - リファレンス - - レイアウト - - 寸法 -translation_of: Web/CSS/object-fit ---- -
{{CSSRef}}
- -

CSS の object-fit プロパティは、置換要素、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。

- -

要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。

- -
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
- - - -

構文

- -

object-fit プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。

- -

値

- -
-
contain
-
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
-
cover
-
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
-
fill
-
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
-
none
-
置換コンテンツは、拡大縮小されません。
-
scale-down
-
コンテンツは none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
-
- -

形式文法

- -{{csssyntax}} - -

例

- -

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

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

出力結果

- -

{{ EmbedLiveSample('Example', 500, 450) }}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初回定義
- -

{{cssinfo}}

- -

ブラウザーの対応

- -

{{Compat("css.properties.object-fit")}}

- -

関連情報

- - diff --git a/files/ja/web/css/object-fit/index.md b/files/ja/web/css/object-fit/index.md new file mode 100644 index 0000000000..f3cd681f5e --- /dev/null +++ b/files/ja/web/css/object-fit/index.md @@ -0,0 +1,167 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +tags: + - CSS + - CSS プロパティ + - CSS 画像 + - object-fit + - リファレンス + - レイアウト + - 寸法 +translation_of: Web/CSS/object-fit +--- +
{{CSSRef}}
+ +

CSS の object-fit プロパティは、置換要素、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。

+ +

要素のボックス内における置換要素の中身オブジェクトの配置を変更するには、 {{cssxref("object-position")}} プロパティを使用することができます。

+ +
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+ + + +

構文

+ +

object-fit プロパティは、以下の一覧の中からキーワードを一つ選んで指定します。

+ +

値

+ +
+
contain
+
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小されます。オブジェクト全体がボックス内に表示され、アスペクト比が維持されるので、オブジェクトのアスペクト比とボックスのアスペクト比が合わない場合は、レターボックス表示になります。
+
cover
+
置換コンテンツはアスペクト比を維持したまま、要素のコンテンツボックス全体を埋めるように拡大縮小されます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトの方が合うように切り取られます。
+
fill
+
置換コンテンツは、要素のコンテンツボックス全体を埋めるサイズになります。オブジェクト全体が完全にボックスの中を埋めます。オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合は、オブジェクトは合うように引き伸ばされます。
+
none
+
置換コンテンツは、拡大縮小されません。
+
scale-down
+
コンテンツは none 又は contain を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。
+
+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

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>
+ +

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

出力結果

+ +

{{ EmbedLiveSample('Example', 500, 450) }}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS4 Images')}} 
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}{{Spec2('CSS3 Images')}}初回定義
+ +

{{cssinfo}}

+ +

ブラウザーの対応

+ +

{{Compat("css.properties.object-fit")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf