【CSS3】object-fit与object-position及替换元素

最新推荐文章于 2024-08-30 12:54:01 发布

Chx.zhang

最新推荐文章于 2024-08-30 12:54:01 发布

阅读量967

点赞数

分类专栏： CSS/HTML/DOM 文章标签： css3 css 前端

本文链接：https://blog.csdn.net/qq_38987146/article/details/122300363

版权

CSS/HTML/DOM 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

`object-fit`、`object-position`

CSS3中的两个属性：object-fit和object-position，这两个属性主要是为了处理可替换元素（replaced elements）的自适应问题(长款比例)。

那什么是可替换元素呢？

可替换元素

什么是可替换性元素呢？MDN是这样定义的：

在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。

简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如元素，可能具有自己的样式表，但它们不会继承父文档的样式。

CSS 能对可替换元素产生的唯一影响在于，部分属性支持控制元素内容在其框中的位置或定位方式。

可替换元素都有那些呢？

典型的可替换元素有：<iframe>，<video>，<embed>，<img>；
有些元素仅在特定情况下被作为可替换元素处理，例如：<option>，<audio>，<canvas>，<object>，<applet>
HTML 规范也说了元素可替换，因为 “image” 类型的元素就像一样被替换。但是其他形式的控制元素，包括其他类型的元素，被明确地列为非可替换元素（non-replaced elements）。该规范用术语小挂件（Widgets）来描述它们默认的限定平台的渲染行为。

用 CSS content 属性插入的对象是匿名的可替换元素。它们并不存在于 HTML 标记中，因此是“匿名的”。

替换元素：

替换元素可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。要想替换元素居中，可以设置line-height = height
同时，此时的display:inline-block; 上下左右padding都有效，margin上下左右都有效。

非替换元素

对于行内元素，设置左右内边距，左右内边距将是可见的。而设置上下内边距，设置背景颜色后可以看见内边距区域有增加，对于行内非替换元素，不会影响其行高，不会撑开父元素。而对于行内替换元素，则撑开了父元素。

Object-fit

语法：

object-fit: fill | contian | cover | none | scale-down;

fill ：默认值。填充，可替换元素填满整个内容区域，可能会改变长宽比，导致拉伸。
contain ：包含，保持原始的尺寸比例，保证可替换元素完整显示，宽度或高度至少有一个和内容区域的宽度或高度一致，部分内容会空白。
cover ：覆盖，保持原始的尺寸比例，保证内容区域被填满。因此，可替换元素可能会被切掉一部分，从而不能完整展示。
none ：保持可替换元素原尺寸和比例。
scale-down ：等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

看效果图：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    .box{   
        position:relative;   
        float:left;   
        margin:0 10px 40px 10px;   
        width:150px;   
        height:150px;   
      }   
      
      .box>img{   
        width:100%;   
        height:100%;   
        background-color:#000;   
      }   
      
      .fill{   
        object-fit:fill;   
      }   
      
      .contain{   
        object-fit:contain;   
      }   
      
      .cover{    
        object-fit:cover;   
      }   
      
      .none{   
        object-fit:none;   
      }   
      
      .scale{   
        object-fit:scale-down;   
      }  
      </style>
</head>
<body>
        <div class="box">   
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6" class="fill" alt="">  
        </div>   
        <div class="box">   
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6" class="contain" alt=""> 
        </div>   
        <div class="box">   
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6" class="cover" alt=""> 
        </div>   
        <div class="box">   
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6" class="none" alt=""> 
        </div>   
        <div class="box">   
          <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6" class="scale" alt=""> 
        </div>
    
</body>
</html>

`object-position`

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法：

object-position: <position>

默认值是50% 50%，也就是居中效果，其取值和CSS中background-position属性取值一样。

替换元素位于内容区域的左上角object-position: 0 0
替换元素相对于左下角10px 10px地方定位：object-position: bottom 10px left 10px;
你也可以使用calc()来定位：object-position: calc(100% - 10px) calc(100% - 10px);
支持负数：object-position: -10px calc(100% - 10px);
效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            float: left;
            margin: 0 10px 40px 10px;
            width: 150px;
            height: 150px;
        }

        .box>img {
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        .position {
            object-fit: contain;
            object-position: 0 0;
        }
        .position2 {
            object-fit: contain;
            object-position: bottom 10px left 10px;
        }
        .calc {
            object-fit: contain;
            object-position: calc(100% - 10px) calc(100% - 10px);
        }
        .minus {
            object-fit: contain;
            object-position: -10px calc(100% - 10px);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6"
            class="position" alt="">
    </div>
    <div class="box">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6"
            class="position2" alt="">
    </div>
    <div class="box">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6"
            class="calc" alt="">
    </div>
    <div class="box">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643861151&t=b0468d211879293e15e0e218cebcc9b6"
            class="minus" alt="">
    </div>
</body>
</html>