From c1ebda663f5e7c64d8bee25e38d3c5819a6d3bba Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 17 Oct 2021 22:08:32 +0900 Subject: CSS 画像の文書を更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/10/16 時点の英語版に同期 --- files/ja/web/css/object-fit/index.md | 181 ++++++++++++++++------------------- 1 file changed, 85 insertions(+), 96 deletions(-) (limited to 'files/ja/web/css/object-fit/index.md') 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 --- -
{{CSSRef}}
+{{CSSRef}} + +[CSS](/ja/docs/Web/CSS) の **`object-fit`** プロパティは、[置換要素](/ja/docs/Web/CSS/Replaced_element)、例えば {{HTMLElement("img")}} や {{HTMLElement("video")}} などの中身を、コンテナーにどのようにはめ込むかを設定します。 -

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

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

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

+{{EmbedInteractiveExample("pages/css/object-fit.html")}} -
{{EmbedInteractiveExample("pages/css/object-fit.html")}}
+## 構文 - +```css +object-fit: contain; +object-fit: cover; +object-fit: fill; +object-fit: none; +object-fit: scale-down; -

構文

+/* グローバル値 */ +object-fit: inherit; +object-fit: initial; +object-fit: revert; +object-fit: unset; +``` -

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

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

値

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

形式文法

+## Formal definition + +{{cssinfo}} + +## Formal syntax {{csssyntax}} -

例

+## 例 -

HTML

+

画像に object-fit を設定

-
<div>
-  <h2>object-fit: fill</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/>
+#### HTML
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/>
+```html
+

+  
object-fit: fill

+  MDN Logo
 
-  <h2>object-fit: contain</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/>
+  MDN Logo
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/>
+  
object-fit: contain

+  MDN Logo
 
-  <h2>object-fit: cover</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/>
+  MDN Logo
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/>
+  
object-fit: cover

+  MDN Logo
 
-  <h2>object-fit: none</h2>
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/>
+  MDN Logo
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/>
+  
object-fit: none

+  MDN Logo
 
-  <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"/>
+  MDN Logo
 
-  <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/>
+  
object-fit: scale-down

+  MDN Logo
 
-</div>
+ MDN Logo + +``` -

CSS

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

出力結果

- -

{{ 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")}}

- -

関連情報

- - +``` + +#### 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")}} -- cgit v1.2.3-54-g00ecf