Object-fit - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
Có thể bạn quan tâm
- References
- CSS
- object-fit
- English (US)
- Remember language
- Deutsch
- Español
- Français
- 日本語
- 한국어
- Português (do Brasil)
- Русский
- 中文 (简体)
- Try it
- Syntax
- Formal definition
- Formal syntax
- Examples
- Specifications
- Browser compatibility
- See also
- CSS
- Tutorials
- CSS basics
- CSS first steps
- CSS first steps overview
- What is CSS?
- Getting started with CSS
- How CSS is structured
- How CSS works
- Assessment: Styling a biography page
- CSS building blocks
- CSS building blocks overview
- CSS selectors
- Type, class, and ID selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators
- Cascade, specificity, and inheritance
- Cascade layers
- The box model
- Backgrounds and borders
- Handling different text directions
- Overflowing content
- CSS values and units
- Sizing items in CSS
- Images, media, and form elements
- Styling tables
- Debugging CSS
- Organizing your CSS
- Assessment: Fundamental CSS comprehension
- Assessment: Creating fancy letterheaded paper
- Assessment: A cool-looking box
- Styling text
- Styling text overview
- Fundamental text and font styling
- Styling lists
- Styling links
- Web fonts
- Assessment: Typesetting a community school homepage
- CSS layout
- CSS layout overview
- Introduction to CSS layout
- Normal Flow
- Flexbox
- Grids
- Floats
- Positioning
- Multiple-column layout
- Responsive design
- Beginner's guide to media queries
- Legacy layout methods
- Supporting older browsers
- Assessment: Fundamental layout comprehension
- Reference
- Modules
- CSS anchor positioning
- CSS animations
- CSS backgrounds and borders
- CSS basic user interface
- CSS box alignment
- CSS box model
- CSS box sizing
- CSS cascade and inheritance
- CSS custom properties for cascading variables
- CSS color adjustment
- CSS colors
- CSS compositing and blending
- CSS conditional rules
- CSS containment
- CSS counter styles
- CSS display
- CSS filter effects
- CSS flexible box layout
- CSS font loading
- CSS fonts
- CSS fragmentation
- CSS generated content
- CSS grid layout
- CSS images
- CSS inline layout
- CSS lists and counters
- CSS logical properties and values
- CSS masking
- CSS media queries
- CSS motion path
- CSS multi-column layout
- CSS namespaces
- CSS nesting
- CSS overflow
- CSS overscroll behavior
- CSS paged media
- CSS positioned layout
- CSS properties and values API
- CSS pseudo-elements
- CSS ruby layout
- CSS scoping
- CSS scroll-driven animations
- CSS scroll snap
- CSS scrollbars styling
- CSS selectors
- CSS shadow parts
- CSS shapes
- CSS syntax
- CSS table
- CSS text
- CSS text decoration
- CSS transforms
- CSS transitions
- CSS view transitions
- CSS writing modes
- CSSOM view
- Properties
- -moz-*
- -moz-float-edge Non-standard Deprecated
- -moz-force-broken-image-icon Non-standard Deprecated
- -moz-image-region Non-standard
- -moz-orient Non-standard
- -moz-user-focus Non-standard Deprecated
- -moz-user-input Non-standard Deprecated
- -webkit-*
- -webkit-border-before Non-standard
- -webkit-box-reflect Non-standard
- -webkit-line-clamp
- -webkit-mask-box-image Non-standard
- -webkit-mask-composite Non-standard
- -webkit-mask-position-x Non-standard
- -webkit-mask-position-y Non-standard
- -webkit-mask-repeat-x Non-standard
- -webkit-mask-repeat-y Non-standard
- -webkit-tap-highlight-color Non-standard
- -webkit-text-fill-color
- -webkit-text-security Non-standard
- -webkit-text-stroke
- -webkit-text-stroke-color
- -webkit-text-stroke-width
- -webkit-touch-callout Non-standard
- accent-color
- align-*
- align-content
- align-items
- align-self
- all
- anchor-name Experimental
- animation-*
- animation
- animation-composition
- animation-delay
- animation-direction
- animation-duration
- animation-fill-mode
- animation-iteration-count
- animation-name
- animation-play-state
- animation-range Experimental
- animation-range-end Experimental
- animation-range-start Experimental
- animation-timeline Experimental
- animation-timing-function
- appearance
- aspect-ratio
- backdrop-filter
- backface-visibility
- background-*
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
- block-size
- border-*
- border
- border-block
- border-block-color
- border-block-end
- border-block-end-color
- border-block-end-style
- border-block-end-width
- border-block-start
- border-block-start-color
- border-block-start-style
- border-block-start-width
- border-block-style
- border-block-width
- border-bottom
- border-bottom-color
- border-bottom-left-radius
- border-bottom-right-radius
- border-bottom-style
- border-bottom-width
- border-collapse
- border-color
- border-end-end-radius
- border-end-start-radius
- border-image
- border-image-outset
- border-image-repeat
- border-image-slice
- border-image-source
- border-image-width
- border-inline
- border-inline-color
- border-inline-end
- border-inline-end-color
- border-inline-end-style
- border-inline-end-width
- border-inline-start
- border-inline-start-color
- border-inline-start-style
- border-inline-start-width
- border-inline-style
- border-inline-width
- border-left
- border-left-color
- border-left-style
- border-left-width
- border-radius
- border-right
- border-right-color
- border-right-style
- border-right-width
- border-spacing
- border-start-end-radius
- border-start-start-radius
- border-style
- border-top
- border-top-color
- border-top-left-radius
- border-top-right-radius
- border-top-style
- border-top-width
- border-width
- bottom
- box-*
- box-align Non-standard Deprecated
- box-decoration-break
- box-direction Non-standard Deprecated
- box-flex Non-standard Deprecated
- box-flex-group Non-standard Deprecated
- box-lines Non-standard Deprecated
- box-ordinal-group Non-standard Deprecated
- box-orient Non-standard Deprecated
- box-pack Non-standard Deprecated
- box-shadow
- box-sizing
- break-*
- break-after
- break-before
- break-inside
- caption-side
- caret-color
- clear
- clip-*
- clip Deprecated
- clip-path
- clip-rule
- color-*
- color
- color-interpolation
- color-interpolation-filters
- color-scheme
- column-*
- column-count
- column-fill
- column-gap
- column-rule
- column-rule-color
- column-rule-style
- column-rule-width
- column-span
- column-width
- columns
- contain-*
- contain
- contain-intrinsic-block-size
- contain-intrinsic-height
- contain-intrinsic-inline-size
- contain-intrinsic-size
- contain-intrinsic-width
- container-*
- container
- container-name
- container-type
- content
- content-visibility
- counter-*
- counter-increment
- counter-reset
- counter-set
- cursor
- cx
- cy
- d
- direction
- display
- dominant-baseline
- empty-cells
- field-sizing Experimental
- fill-*
- fill
- fill-opacity
- fill-rule
- filter
- flex-*
- flex
- flex-basis
- flex-direction
- flex-flow
- flex-grow
- flex-shrink
- flex-wrap
- float
- flood-color
- flood-opacity
- font-*
- font
- font-family
- font-feature-settings
- font-kerning
- font-language-override
- font-optical-sizing
- font-palette
- font-size
- font-size-adjust
- font-smooth Non-standard
- font-stretch
- font-style
- font-synthesis
- font-synthesis-position
- font-synthesis-small-caps
- font-synthesis-style
- font-synthesis-weight
- font-variant
- font-variant-alternates
- font-variant-caps
- font-variant-east-asian
- font-variant-emoji
- font-variant-ligatures
- font-variant-numeric
- font-variant-position
- font-variation-settings
- font-weight
- forced-color-adjust
- gap
- grid-*
- grid
- grid-area
- grid-auto-columns
- grid-auto-flow
- grid-auto-rows
- grid-column
- grid-column-end
- grid-column-start
- grid-row
- grid-row-end
- grid-row-start
- grid-template
- grid-template-areas
- grid-template-columns
- grid-template-rows
- hanging-punctuation
- height
- hyphenate-character
- hyphenate-limit-chars
- hyphens
- image-*
- image-orientation
- image-rendering
- image-resolution Experimental
- initial-letter
- inline-size
- inset-*
- inset
- inset-block
- inset-block-end
- inset-block-start
- inset-inline
- inset-inline-end
- inset-inline-start
- interpolate-size Experimental
- isolation
- justify-*
- justify-content
- justify-items
- justify-self
- left
- letter-spacing
- lighting-color
- line-*
- line-break
- line-height
- line-height-step Experimental
- list-*
- list-style
- list-style-image
- list-style-position
- list-style-type
- margin-*
- margin
- margin-block
- margin-block-end
- margin-block-start
- margin-bottom
- margin-inline
- margin-inline-end
- margin-inline-start
- margin-left
- margin-right
- margin-top
- margin-trim Experimental
- marker-*
- marker
- marker-end
- marker-mid
- marker-start
- mask-*
- mask
- mask-border
- mask-border-mode
- mask-border-outset
- mask-border-repeat
- mask-border-slice
- mask-border-source
- mask-border-width
- mask-clip
- mask-composite
- mask-image
- mask-mode
- mask-origin
- mask-position
- mask-repeat
- mask-size
- mask-type
- math-*
- math-depth
- math-shift Experimental
- math-style
- max-*
- max-block-size
- max-height
- max-inline-size
- max-width
- min-*
- min-block-size
- min-height
- min-inline-size
- min-width
- mix-blend-mode
- object-fit
- object-position
- offset-*
- offset
- offset-anchor
- offset-distance
- offset-path
- offset-position
- offset-rotate
- opacity
- order
- orphans
- outline-*
- outline
- outline-color
- outline-offset
- outline-style
- outline-width
- overflow-*
- overflow
- overflow-anchor
- overflow-block
- overflow-clip-margin
- overflow-inline
- overflow-wrap
- overflow-x
- overflow-y
- overlay Experimental
- overscroll-*
- overscroll-behavior
- overscroll-behavior-block
- overscroll-behavior-inline
- overscroll-behavior-x
- overscroll-behavior-y
- padding-*
- padding
- padding-block
- padding-block-end
- padding-block-start
- padding-bottom
- padding-inline
- padding-inline-end
- padding-inline-start
- padding-left
- padding-right
- padding-top
- page-*
- page
- page-break-after
- page-break-before
- page-break-inside
- paint-order
- perspective
- perspective-origin
- place-*
- place-content
- place-items
- place-self
- pointer-events
- position-*
- position
- position-anchor Experimental
- position-area
- position-try Experimental
- position-try-fallbacks Experimental
- position-try-order Experimental
- position-visibility Experimental
- print-color-adjust
- quotes
- r
- resize
- right
- rotate
- row-gap
- ruby-align
- ruby-position
- rx
- ry
- scale
- scroll-*
- scroll-behavior
- scroll-margin
- scroll-margin-block
- scroll-margin-block-end
- scroll-margin-block-start
- scroll-margin-bottom
- scroll-margin-inline
- scroll-margin-inline-end
- scroll-margin-inline-start
- scroll-margin-left
- scroll-margin-right
- scroll-margin-top
- scroll-padding
- scroll-padding-block
- scroll-padding-block-end
- scroll-padding-block-start
- scroll-padding-bottom
- scroll-padding-inline
- scroll-padding-inline-end
- scroll-padding-inline-start
- scroll-padding-left
- scroll-padding-right
- scroll-padding-top
- scroll-snap-align
- scroll-snap-stop
- scroll-snap-type
- scroll-timeline Experimental
- scroll-timeline-axis Experimental
- scroll-timeline-name Experimental
- scrollbar-*
- scrollbar-color
- scrollbar-gutter
- scrollbar-width
- shape-*
- shape-image-threshold
- shape-margin
- shape-outside
- shape-rendering
- stop-color
- stop-opacity
- stroke-*
- stroke
- stroke-dasharray
- stroke-dashoffset
- stroke-linecap
- stroke-linejoin
- stroke-miterlimit
- stroke-opacity
- stroke-width
- tab-size
- table-layout
- text-*
- text-align
- text-align-last
- text-anchor
- text-combine-upright
- text-decoration
- text-decoration-color
- text-decoration-line
- text-decoration-skip Experimental
- text-decoration-skip-ink
- text-decoration-style
- text-decoration-thickness
- text-emphasis
- text-emphasis-color
- text-emphasis-position
- text-emphasis-style
- text-indent
- text-justify
- text-orientation
- text-overflow
- text-rendering
- text-shadow
- text-size-adjust Experimental
- text-spacing-trim Experimental
- text-transform
- text-underline-offset
- text-underline-position
- text-wrap
- text-wrap-mode
- text-wrap-style
- timeline-scope Experimental
- top
- touch-action
- transform-*
- transform
- transform-box
- transform-origin
- transform-style
- transition-*
- transition
- transition-behavior
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
- translate
- unicode-bidi
- user-modify Non-standard Deprecated
- user-select
- vector-effect
- vertical-align
- view-*
- view-timeline Experimental
- view-timeline-axis Experimental
- view-timeline-inset Experimental
- view-timeline-name Experimental
- view-transition-name
- visibility
- white-space
- white-space-collapse
- widows
- width
- will-change
- word-break
- word-spacing
- writing-mode
- x
- y
- z-index
- zoom
- -moz-*
- Selectors
- Attribute selectors
- Class selectors
- ID selectors
- & nesting selector
- Type selectors
- Universal selectors
- Combinators
- Child combinator
- Column combinator Experimental
- Descendant combinator
- Namespace separator
- Next-sibling combinator
- Selector list
- Subsequent-sibling combinator
- Pseudo-classes
- :-moz-broken Non-standard Deprecated
- :-moz-drag-over Non-standard
- :-moz-first-node Experimental Non-standard
- :-moz-handler-blocked Non-standard
- :-moz-handler-crashed Non-standard
- :-moz-handler-disabled Non-standard
- :-moz-last-node Experimental Non-standard
- :-moz-loading Non-standard
- :-moz-locale-dir(ltr) Non-standard
- :-moz-locale-dir(rtl) Non-standard
- :-moz-only-whitespace Non-standard
- :-moz-submit-invalid Non-standard
- :-moz-suppressed Non-standard
- :-moz-user-disabled Non-standard
- :-moz-window-inactive Non-standard
- :active
- :any-link
- :autofill
- :blank Experimental
- :buffering
- :checked
- :current
- :default
- :defined
- :dir()
- :disabled
- :empty
- :enabled
- :first
- :first-child
- :first-of-type
- :focus
- :focus-visible
- :focus-within
- :fullscreen
- :future
- :has()
- :host
- :host-context()
- :host()
- :hover
- :in-range
- :indeterminate
- :invalid
- :is()
- :lang()
- :last-child
- :last-of-type
- :left
- :link
- :local-link
- :modal
- :muted
- :not()
- :nth-child()
- :nth-last-child()
- :nth-last-of-type()
- :nth-of-type()
- :only-child
- :only-of-type
- :optional
- :out-of-range
- :past
- :paused
- :picture-in-picture
- :placeholder-shown
- :playing
- :popover-open
- :read-only
- :read-write
- :required
- :right
- :root
- :scope
- :seeking
- :stalled
- :state()
- :target
- :target-within Experimental
- :user-invalid
- :user-valid
- :valid
- :visited
- :volume-locked
- :where()
- Pseudo-elements
- ::-moz-color-swatch Non-standard
- ::-moz-focus-inner Experimental Non-standard
- ::-moz-list-bullet Experimental Non-standard
- ::-moz-list-number Experimental Non-standard
- ::-moz-meter-bar Non-standard
- ::-moz-progress-bar Experimental Non-standard
- ::-moz-range-progress Non-standard
- ::-moz-range-thumb Non-standard
- ::-moz-range-track Non-standard
- ::-webkit-inner-spin-button Non-standard
- ::-webkit-meter-bar Non-standard Deprecated
- ::-webkit-meter-even-less-good-value Non-standard
- ::-webkit-meter-inner-element Non-standard
- ::-webkit-meter-optimum-value Non-standard
- ::-webkit-meter-suboptimum-value Non-standard
- ::-webkit-progress-bar Non-standard
- ::-webkit-progress-inner-element Non-standard
- ::-webkit-progress-value Non-standard
- ::-webkit-scrollbar Non-standard
- ::-webkit-search-cancel-button Non-standard
- ::-webkit-search-results-button Non-standard
- ::-webkit-slider-runnable-track Experimental Non-standard
- ::-webkit-slider-thumb Experimental Non-standard
- ::after
- ::backdrop
- ::before
- ::cue
- ::file-selector-button
- ::first-letter
- ::first-line
- ::grammar-error
- ::highlight()
- ::marker
- ::part()
- ::placeholder
- ::selection
- ::slotted()
- ::spelling-error
- ::target-text
- ::view-transition
- ::view-transition-group
- ::view-transition-image-pair
- ::view-transition-new
- ::view-transition-old
- At-rules
- @charset
- @color-profile
- @container
- @counter-style
- @document Non-standard Deprecated
- @font-face
- @font-feature-values
- @font-palette-values
- @import
- @keyframes
- @layer
- @media
- @namespace
- @page
- @position-try Experimental
- @property
- @scope
- @starting-style
- @supports
- @view-transition Experimental
- Functions
- -moz-image-rect Non-standard Deprecated
- abs()
- acos()
- anchor-size() Experimental
- anchor() Experimental
- asin()
- atan()
- atan2()
- attr()
- blur()
- brightness()
- calc-size() Experimental
- calc()
- circle()
- clamp()
- color-mix()
- color()
- conic-gradient()
- contrast()
- cos()
- counter()
- counters()
- cross-fade()
- cubic-bezier()
- device-cmyk()
- drop-shadow()
- element() Experimental
- ellipse()
- env()
- exp()
- fit-content()
- grayscale()
- hsl()
- hue-rotate()
- hwb()
- hypot()
- image-set()
- image()
- inset()
- invert()
- lab()
- layer()
- lch()
- light-dark()
- linear-gradient()
- linear()
- log()
- matrix()
- matrix3d()
- max()
- min()
- minmax()
- mod()
- oklab()
- oklch()
- opacity()
- paint()
- palette-mix() Experimental
- path()
- perspective()
- polygon()
- pow()
- radial-gradient()
- ray()
- rect()
- rem()
- repeat()
- repeating-conic-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- rgb()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- round()
- saturate()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- scroll() Experimental
- sepia()
- shape() Experimental
- sign()
- sin()
- skew()
- skewX()
- skewY()
- sqrt()
- steps()
- symbols()
- tan()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()
- url()
- var()
- view() Experimental
- xywh()
- Types
- <absolute-size>
- <alpha-value>
- <angle>
- <angle-percentage>
- <basic-shape>
- <blend-mode>
- <box-edge>
- <calc-keyword>
- <calc-sum>
- <color-interpolation-method>
- <color>
- <custom-ident>
- <dashed-ident>
- <dimension>
- <display-box>
- <display-inside>
- <display-internal>
- <display-legacy>
- <display-listitem>
- <display-outside>
- <easing-function>
- <filter-function>
- <flex>
- <frequency>
- <frequency-percentage>
- <generic-family>
- <gradient>
- <hex-color>
- <hue>
- <hue-interpolation-method>
- <ident>
- <image>
- <integer>
- <length>
- <length-percentage>
- <line-style>
- <named-color>
- <number>
- <overflow>
- <percentage>
- <position-area>
- <position>
- <ratio>
- <relative-size>
- <resolution>
- <shape> Deprecated
- <string>
- <system-color>
- <time>
- <time-percentage>
- <transform-function>
- <url>
- Guides
- Animations
- Using CSS animations
- Backgrounds and Borders
- Using multiple backgrounds
- Resizing background images
- Box alignment
- Box alignment in block layout
- Box alignment in flexbox
- Box alignment in grid layout
- Box alignment in multi-column layout
- Box model
- Introduction to the CSS basic box model
- Mastering margin collapsing
- Colors
- Applying color to HTML elements
- Color values
- Using relative colors
- Using color wisely
- Accessibility: Understanding colors and luminance
- Accessibility: Color contrast
- Columns
- Basic concepts of Multicol
- Styling columns
- Spanning and balancing
- Handling overflow in Multicol
- Content breaks in Multicol
- Conditional rules
- Using feature queries
- Containment
- Using CSS containment
- CSS container queries
- Using container size and style queries
- CSSOM view
- Coordinate systems
- Flexbox
- Basic concepts of Flexbox
- Comparison with other layout methods
- Aligning items in a flex container
- Ordering flex items
- Controlling flex item ratios
- Mastering wrapping of flex items
- Typical use cases of Flexbox
- Flow layout
- Block and Inline layout in normal flow
- In flow and Out of flow
- Formatting contexts explained
- Flow layout and writing modes
- Flow layout and overflow
- Fonts
- OpenType font features guide
- Variable fonts guide
- Grid
- Basics concepts of grid layout
- Relationship to other layout methods
- Line-based placement
- Grid template areas
- Layout using named grid lines
- Auto-placement in grid layout
- Box alignment in grid layout
- Grids, logical values and writing modes
- Grid layout and accessibility
- Grid Layout and progressive enhancement
- Realizing common layouts using grids
- Subgrid
- Masonry layout
- Images
- Using CSS gradients
- Lists and counters
- Using CSS counters
- Consistent list indentation
- Logical properties
- Basic concepts
- Floating and positioning
- Margins, borders and padding
- Sizing
- Math functions
- Using CSS math functions
- Media queries
- Using media queries
- Using media queries for accessibility
- Testing media queries programmatically
- Printing
- Nesting style rules
- Using CSS nesting
- Nesting at-rules
- Nesting and specificity
- Positioning
- Understanding CSS z-index
- Scroll snap
- Basic concepts of scroll snap
- Shapes
- Overview of shapes
- Shapes from box values
- Basic shapes
- Shapes from images
- Text
- Wrapping and breaking text
- Transforms
- Using transforms
- Transitions
- Using transitions
- Layout cookbook
-
- Media objects
- Columns
- Center an element
- Sticky footers
- Split navigation
- Breadcrumb navigation
- List group with badges
- Pagination
- Card
- Grid wrapper
- Tools
-
- Color picker
- Box shadow generator
- Border image generator
- Border radius generator
- Try it
- Syntax
- Formal definition
- Formal syntax
- Examples
- Specifications
- Browser compatibility
- See also
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
Note: The object-fit property has no effect on <iframe>, <embed>, and <fencedframe> elements.
You can alter the alignment of the replaced element's content object within the element's box using the object-position property.
Try it
Syntax
cssobject-fit: contain; object-fit: cover; object-fit: fill; object-fit: none; object-fit: scale-down; /* Global values */ object-fit: inherit; object-fit: initial; object-fit: revert; object-fit: revert-layer; object-fit: unset;The object-fit property is specified as a single keyword chosen from the list of values below.
Values
containThe replaced content is scaled to maintain its aspect ratio while fitting within the element's content box. The entire object is made to fill the box, while preserving its aspect ratio, so the object will be "letterboxed" or "pillarboxed" if its aspect ratio does not match the aspect ratio of the box.
coverThe replaced content is sized to maintain its aspect ratio while filling the element's entire content box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be clipped to fit.
fillThe replaced content is sized to fill the element's content box. The entire object will completely fill the box. If the object's aspect ratio does not match the aspect ratio of its box, then the object will be stretched to fit.
noneThe replaced content is not resized.
scale-downThe content is sized as if none or contain were specified, whichever would result in a smaller concrete object size.
Formal definition
Initial value | fill |
---|---|
Applies to | replaced elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
object-fit = fill | contain | cover | none | scale-downExamples
Setting object-fit for an image
HTML
html<section> <h2>object-fit: fill</h2> <img class="fill" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="fill narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: contain</h2> <img class="contain" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="contain narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: cover</h2> <img class="cover" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="cover narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: none</h2> <img class="none" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="none narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> <h2>object-fit: scale-down</h2> <img class="scale-down" src="mdn_logo_only_color.png" alt="MDN Logo" /> <img class="scale-down narrow" src="mdn_logo_only_color.png" alt="MDN Logo" /> </section>CSS
cssh2 { font-family: Courier New, monospace; font-size: 1em; margin: 1em 0 0.3em; } img { width: 150px; height: 100px; border: 1px solid #000; margin: 10px 0; } .narrow { width: 100px; height: 150px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }Result
Specifications
Specification |
---|
CSS Images Module Level 3 # the-object-fit |
Browser compatibility
BCD tables only load in the browser
See also
- Other image-related CSS properties: object-position, image-orientation, image-rendering, image-resolution.
- background-size
- Understanding aspect ratios
Help improve MDN
Was this page helpful to you?YesNoLearn how to contribute.This page was last modified on Oct 25, 2024 by MDN contributors.
View this page on GitHub • Report a problem with this contentTừ khóa » Html5 Video Scale To Fit Div
-
HTML5 Video Scale Modes? - Stack Overflow
-
Fluid Width Video | CSS-Tricks
-
Search Code Snippets | Html5 Video Scale To Fit Div
-
Video Object-fit - CodePen
-
Responsive Video Resizing - Matt Smith
-
CSS Object-fit Property - W3Schools
-
Responsive Web Design Videos - W3Schools
-
Fit To Container Video/image In CSS (aspect Ratio Friendly) - Coderwall
-
Set (resize) Height Width Of HTML5 Video Using CSS In ASP.Net
-
Maintaining Aspect Ratios For HTML Videos With CSS - UsefulAngle
-
How To Set Height And Width Of Video In Html
-
Scale Html5 Video And Break Aspect Ratio To Fill Whole Site
-
How To Auto-resize An Image To Fit A Div Container Using CSS?
-
Html5 Video Scale To Fit Div Code Example - Newbedev