diff options
Diffstat (limited to 'files/zh-tw/web/css/object-fit/index.html')
| -rw-r--r-- | files/zh-tw/web/css/object-fit/index.html | 217 |
1 files changed, 217 insertions, 0 deletions
diff --git a/files/zh-tw/web/css/object-fit/index.html b/files/zh-tw/web/css/object-fit/index.html new file mode 100644 index 0000000000..e6b73dc0b9 --- /dev/null +++ b/files/zh-tw/web/css/object-fit/index.html @@ -0,0 +1,217 @@ +--- +title: object-fit +slug: Web/CSS/object-fit +translation_of: Web/CSS/object-fit +--- +<div>{{CSSRef}}</div> + +<h2 id="Summary" name="Summary">Summary</h2> + +<p>The <strong><code>object-fit</code></strong> CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.</p> + +<p>物件契合(<strong><code>object-fit)</code></strong>CSS屬性能指定置換元素(replaced element)的內容要如何契合、安裝到其使用的高度和寬度已確定的框。</p> + +<p> </p> + +<p>{{cssinfo}}</p> + +<h2 id="Syntax" name="Syntax">Syntax</h2> + +<pre class="brush:css">/* Keyword values */ +object-fit: fill; +object-fit: contain; +object-fit: cover; +object-fit: none; +object-fit: scale-down; + +/* Global values */ +object-fit: inherit; +object-fit: initial; +object-fit: unset; +</pre> + +<h3 id="Values" name="Values">Values</h3> + +<dl> + <dt><code>fill</code></dt> + <dd>The replaced content is sized to fill the element’s content box: the object’s concrete object size is the element’s used width and height.</dd> + <dt><code>contain</code></dt> + <dd>The replaced content is sized to maintain its aspect ratio while fitting within the element’s content box: its concrete object size is resolved as a contain constraint against the element’s used width and height.</dd> + <dt><code>cover</code></dt> + <dd>The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box: its concrete object size is resolved as a cover constraint against the element’s used width and height.</dd> + <dt><code>none</code></dt> + <dd>The replaced content is not resized to fit inside the element’s content box: the object’s concrete object size is determined using the default sizing algorithm with no specified size, and a default object size equal to the replaced element’s used width and height.</dd> + <dt><code>scale-down</code></dt> + <dd>The content is sized as if <code>none</code> or <code>contain</code> were specified, whichever would result in a smaller concrete object size.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="Example" name="Example">Example</h2> + +<h3 id="HTML_Content">HTML Content</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_Content">CSS Content</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">Output</h3> + +<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> + +<h2 id="Specifications" name="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS4 Images')}}</td> + <td>The <code>from-image</code> and <code>flip</code> keywords have been added.</td> + </tr> + <tr> + <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> + <td>{{Spec2('CSS3 Images')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2> + +<p>{{ CompatibilityTable }}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>31.0</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.60{{ property_prefix("-o") }}<br> + 19.0</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>4.4.4</td> + <td>{{ CompatGeckoDesktop("36") }}</td> + <td>{{CompatNo}}</td> + <td>11.5{{ property_prefix("-o") }}<br> + 24</td> + <td>{{ CompatVersionUnknown }}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also" name="See_also">See also</h2> + +<ul> + <li>Other image-related CSS properties: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> +</ul> |