CSS3 object-fit和object-position
object-fit
和object-position
。替换元素
(replaced elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。替换元素
?替换元素其实是:- 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
- CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。
object-fit: fill | contian | cover | none | scale-down;
fill
: 默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。contain
: 包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。cover
: 覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。none
: 保持可替换元素原尺寸和比例。scale-down
: 等比缩小。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。
<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>
<div class="box">
<img src="example-girl.jpg" class="fill" alt="">
</div>
<div class="box">
<img src="example-girl.jpg" class="contain" alt="">
</div>
<div class="box">
<img src="example-girl.jpg" class="cover" alt="">
</div>
<div class="box">
<img src="example-girl.jpg" class="none" alt="">
</div>
<div class="box">
<img src="example-girl.jpg" class="scale" alt="">
</div>
object-position: <position>
50% 50%
,也就是居中效果,其取值和CSS中background-position
属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3 Background》)img{
object-fit: contain;
object-position: 0 0;
}
img{
object-fit: contain;
object-position: bottom 10px left 10px;
}
img{
object-fit: contain;
object-position: calc(100% - 10px) calc(100% - 10px);
}
img{
object-fit: contain;
object-position: -10px calc(100% - 10px);
}
object-position
的特性表现与backgound-position
一样一样的。