--- 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> {{csssyntax}} <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>