object-fit （image,video）自适应

最新推荐文章于 2024-05-10 18:42:59 发布

节操下溢笨狐狸

最新推荐文章于 2024-05-10 18:42:59 发布

阅读量3w

点赞数 10

分类专栏： html5

本文链接：https://blog.csdn.net/qq_20332637/article/details/80304743

版权

html5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

替换元素

其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的html文档。
CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object, video, textarea, input也是替换元素，audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

为何需要object-position/object-fit?

适配响应式布局

object-fit理解

.fill { object-fit: fill; }
.contain { object-fit: contain; }
.cover { object-fit: cover; }
.none { object-fit: none; }
.scale-down { object-fit: scale-down; }

每个属性值的具体含义如下：

fill: 中文释义“填充”。默认值。替换内容拉伸填满整个content box, 不保证保持原有的比例。
contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。
cover: 中文释义“覆盖”。保持原有尺寸比例。保证替换内容尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让替换内容（如图片）部分区域不可见。
none: 中文释义“无”。保持原有尺寸比例。同时保持替换内容原始尺寸大小。
scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
范例

其原本的尺寸是450*302像素，容器的尺寸是160*160, 背景色是灰蓝色，同时，测试的图片高宽设置为100%。代码如下：

css

h2 {
  font-family: Courier New, monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  width:302px;
  height:202px;
  border:1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit:fill;
}

img{
  width:100%;
  height:100%;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

HTML

<html>
<head>
	<link rel="stylesheet" type="text/css" href="object-fit.css">
</head>
<body>
<div>
  <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1526212574&di=d7da79bec27769a727d6dbc7c4668d4d&src=http://img1.cache.netease.com/catchpic/C/C7/C7F6DDD628AF0834C677072B06BBE2C8.jpg" alt="MDN Logo" 
	class="contain"/>
</div>
</body>
</html>

效果图：

object-fit:fill;

object-fit:contain;

object-fit:none;

object-fit:cover;(不太理解)

object-fit:scale-down;

scale-down由于具有动态特性，所以要专门展示下。实际的替换内容表现是none和contain最终尺寸小的那个属性值的表现。

例如，假设我们的容器可以resize拉伸，改变其尺寸，则当容器尺寸比450*302小的时候，也就是容器比替换内容（这里的图片）实际尺寸小的时候，效果跟contain一致，因为此时contain的实际展示尺寸比none小。如下截图示意：

但是，当容器尺寸拉伸到比图片实际尺寸还大的时候，则效果跟none一致，因为此时none的实际展示尺寸比contain小。如下截图：

节操下溢笨狐狸

关注

10
点赞
踩
28

收藏

觉得还不错? 一键收藏
3
评论
object-fit （image,video）自适应

替换元素其内容不受CSS视觉格式化模型（中文释义参见这里）控制的元素，比如image, 嵌入的文档(iframe之类)或者applet。比如，img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸：一个固有的宽度，一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度，从而也有固有的宽高比率。另一方面，其他文档也可能没有固有的尺寸，比如一个空白的ht...
复制链接

扫一扫