이 문서는 아직 자원 봉사자들이 한국어로 번역하지 않았습니다. 함께 해서 번역을 마치도록 도와 주세요!
Summary
The object-fit
CSS property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
Initial value | fill |
---|---|
Applies to | replaced elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Syntax
/* 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;
Values
fill
- 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.
contain
- 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.
cover
- 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.
none
- 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.
scale-down
- The content is sized as if
none
orcontain
were specified, whichever would result in a smaller concrete object size.
Formal syntax
fill | contain | cover | none | scale-down
Example
HTML Content
<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 Content
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; }
Output
Specifications
Specification | Status | Comment |
---|---|---|
CSS Image Values and Replaced Content Module Level 4 The definition of 'object-fit' in that specification. |
Working Draft | The from-image and flip keywords have been added. |
CSS Image Values and Replaced Content Module Level 3 The definition of 'object-fit' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 31.0 | 36 (36) | No support | 11.60-o 19.0 |
(Yes) |
Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 4.4.4 | 36 (36) | No support | 11.5-o 24 |
(Yes) |
See also
- Other image-related CSS properties:
object-position
,image-orientation
,image-rendering
,image-resolution
.