当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS object-position用法及代码示例

CSS的object-position属性指定如何在其内容框中使用x /y坐标定位图像或视频元素。

用法:

object-position:<position> | initial | inherit 

属性值:


  • position:这指定了元素的位置。它采用2个数值,分别对应于距content-box左侧的距离和距content-box顶部顶部的距离。也可以使用负值。

    范例1:

    <!DOCTYPE html> 
      
    <head> 
        <title>CSS object-position</title> 
        <style> 
            img { 
                width:300px; 
                height:250px; 
                background-color:silver; 
                object-fit:none; 
                /* Setting the object-position to '10px'  
                 from the leftmost of the 
                 box and '30px' from the topmost of the box */ 
                object-position:10px 30px; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>object-position:10px 30px</p> 
        <img id="object" src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    </body> 
      
    </html>

    输出:

    object-position:10px 30px

    范例2:

    <!DOCTYPE html> 
      
    <head> 
        <title>CSS object-position</title> 
        <style> 
            img { 
                width:300px; 
                height:250px; 
                background-color:silver; 
                object-fit:none; 
                /* Setting the object-position to '50%' 
                from the leftmost of the 
                box and '75%' from the topmost of the box */ 
                object-position:50% 75%; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>object-position:50% 75%</p> 
        <img id="object" src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    </body> 
      
    </html>

    输出:

    object-position:50% 75%

    范例3:

    <!DOCTYPE html> 
      
    <head> 
        <title>CSS object-position</title> 
        <style> 
            img { 
                width:300px; 
                height:250px; 
                background-color:silver; 
                object-fit:none; 
                /* Setting the object-position to 'left' 
                 from the leftmost of the 
                 box and 'bottom' from the topmost of the box */ 
                object-position:left bottom; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>object-position:left bottom</p> 
        <img id="object" src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    </body> 
      
    </html>

    输出:

    object-position:left bottom


    范例4:

    <!DOCTYPE html> 
      
    <head> 
        <title>CSS object-position</title> 
        <style> 
            img { 
                width:300px; 
                height:250px; 
                background-color:silver; 
                object-fit:none; 
                /* Setting the object-position to 'center' 
                 from the leftmost of the 
                 box and 'top' from the topmost of the box */ 
                object-position:center top; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>object-position:center top</p> 
        <img src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    </body> 
      
    </html>

    输出:

    object-position:center top

  • initial:这将设置属性的默认值,即50%50%,其中元素位于内容框的中间。

    例:

    <!DOCTYPE html> 
      
    <head> 
        <title>CSS object-position</title> 
        <style> 
            img { 
                width:300px; 
                height:250px; 
                background-color:silver; 
                object-fit:none; 
                /* sets the default value of 
                 object-position property */ 
                object-position:initial 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>object-position:initial</p> 
        <img src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
    </body> 
      
    </html>

    输出:

    object-position:initial

  • inherit:这从父元素接收属性。当与root元素一起使用时,将使用initial属性。

    例:

    <!DOCTYPE html> 
      
    <head> 
        <title>CSS object-position</title> 
        <style> 
            #parent { 
                object-position:60% 80%; 
            } 
              
            img { 
                width:300px; 
                height:250px; 
                background-color:silver; 
                object-fit:none; 
                /* inherits the property of the parent */ 
                object-position:inherit; 
            } 
        </style> 
    </head> 
      
    <body> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <p>object-position:inherit</p> 
        <div id="parent"> 
            <img src= 
    "https://media.geeksforgeeks.org/wp-content/uploads/sample_image.png" /> 
        </div> 
    </body> 
      
    </html>

    输出:

    object-position:inherit

支持的浏览器:下面列出了object-position属性支持的浏览器:

  • 谷歌浏览器
  • 火狐浏览器
  • Opera
  • 苹果浏览器


相关用法


注:本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 CSS | object-position Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。