MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    object-fit

    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.

    Syntax

    Formal syntax:  fill | contain | cover | none | scale-down
    object-fit: fill
    object-fit: contain
    object-fit: cover
    object-fit: none
    object-fit: scale-down
    

    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 or contain were specified, whichever would result in a smaller concrete object size.

    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 specification

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 31.0 36 (36) Not supported 11.60-o
    19.0
    (Yes)
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 4.4.4 36 (36) Not supported 11.5-o
    24
    (Yes)

    See also

    Document Tags and Contributors

    Contributors to this page: phistuck, stephaniehobson, Sebastianz, teoli
    Last updated by: Sebastianz,