Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla
Your Search Results

    object-position

    この記事はまだ日本語に翻訳されていません。MDN の翻訳はボランティアによって行われています。是非 MDN に登録し、私たちの力になって下さい。

    Summary

    The object-position property determines the alignment of the replaced element inside its box.

    • Initial value 50% 50%
    • Applies to replaced elements
    • Inherited yes
    • Percentages refer to width and height of element itself
    • Media visual
    • Computed value as specified
    • Animatable yes, as a repeatable list of a simple list of a length, percentage or calc(); when both values are lengths, they are interpolated as lengths; when both values are percentages, they are interpolated as percentages; otherwise, both values are converted into a calc() function that is the sum of a length and a percentage (each possibly zero), and these calc() functions have each half interpolated as real numbers.
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax:  <position>

    Values

    <position>
    Is a <position>, that is one to four values representing a 2D position regarding the edges of the element's box. Relative or absolute offsets can be given. Note that the position can be set outside of the element's box.

    Example

    HTML Content

    <img id="object-position-1" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
    <img id="object-position-2" src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo"/>
    

    CSS Content

    img {
      width: 150px;
      height: 100px;
      border: 1px solid #000;
      background-color: yellow;
      margin-right: 1em;
    }
    
    #object-position-1 {
      object-position: 10px;
    }
    
    #object-position-2 {
      object-position: 20% 10%;
    }
    

    Output

    Specifications

    Specification Status Comment
    CSS Image Values and Replaced Content Module Level 4
    The definition of 'object-position' 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-position' 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
    Not supported
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 4.4.4 36 (36) Not supported 11.5-o
    24
    Not supported

    See also

    ドキュメントのタグと貢献者

    Contributors to this page: Dholbert, Sebastianz, teoli
    最終更新者: Dholbert,