对象填满方式与定位

对于“可置换对象”( 例如图片、影片 ) 而言，除了遮罩和裁切可以改变显示范围，也可以透过 object-fit 和 object-position 等样式属性设定填满适应方式和定位，这篇教学会介绍这些样式属性的用法，以及透过这两个样式实作 sprite 图片效果。

快速导览：

• object-fit 对象填满适应
• object-position 对象定位
• 运用 object-position 实作 sprite 图片效果

object-fit 对象填满方式

object-fit 表示“对象填满方式”的样式属性，没有继承特性，这个样式主要针对“可置换对象”，也就是更换的 src 属性就能更换内容的元素，例如图片 img、影片 video 或页框 iframe 都属于可置换元素，在指定可置换元素的尺寸后，可进一步利用 object-fit 样式属性，设定动态放入内容的填满方式。

下方范例会先将 <img> 元素的宽高设定为 80px 和 300px，接着观察不同 object-fit 属性值所呈现的不同效果，例如设定 fill 会让对象宽高符合元素宽高，就发生变形现象，设定 contain 的对象会发生裁切，设定 cover 为了显示完整对象，会露出不合比例而多出来的元素背景， 设定 none 则会保持原本对象尺寸而发生裁切，scale-down 在这个范例中因为对象尺寸大于元素，会使用 none 呈现。

线上展示：https://codepen.io/oxxo/pen/xxvvVob

<!-- HTML 程式碼-->
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<br>
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg">

<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 10px 40px 10px 10px;
  }
  img:not(:nth-of-type(1)){
    width: 80px;
    height: 320px;
  }
  img:nth-of-type(2) {object-fit: fill;}
  img:nth-of-type(3) {object-fit: cover;}
  img:nth-of-type(4) {object-fit: contain;}
  img:nth-of-type(5) {object-fit: none;}
  img:nth-of-type(6) {object-fit: scale-down;}
</style>

下方范例会呈现 scale-down 在不同元素大小中的效果，如果对象尺寸大于元素就等同 contain，如果对象尺寸小于元素就等同 none。

线上展示：https://codepen.io/oxxo/pen/dyxxMBX

<!-- HTML 程式碼-->
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
<br>
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">


<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 20px;
  }
  img:nth-of-type(1) {
  width: 50px;
  height: 300px;
    object-fit: contain;
  }
  img:nth-of-type(2) {
  width: 50px;
  height: 300px;
    object-fit: scale-down;
  }
  img:nth-of-type(3) {
    width: 300px;
    height: 300px;
    object-fit: none;
  }
  img:nth-of-type(4) {
    width: 300px;
    height: 300px;
    object-fit: scale-down;
  }
</style>

object-position 对象定位

object-position 可以定义“对象在元素中的位置”，使用方式和 mask-position 完全相同，没有继承特性，使用“对齐关键字”或“位置偏移量”来定义对象的位置，可以将关键字与偏移量互相搭配，产生“1～4”个属性值，下列方列出相关撰写语法：

• 对齐关键字

  单纯使用位置名称进行对齐，这个写法会有“1～2”个属性值，使用后表示会将对象的边缘或中心点贴齐指定位置，注意，不能同时使用“top 与 bottom”或“left 与 right”。

  关键字	等同属性值	说明
  top	center top	靠上对齐
  right	right center	靠右对齐
  bottom	center bottom	靠下对齐
  left	left center	靠左对齐
  center	center center	置中对齐
  left top	-	靠左上对齐 ( 默认值 )
  left bottom	-	靠左下对齐
  right top	-	靠右上对齐
  right bottom	-	靠右下对齐

• 位置偏移量 ( 百分比 )

  使用百分比单位，在没有设定对齐关键字的状态下，采用“left top”的方式进行偏移，并按照“百分比公式”计算偏移量，由于最终偏移结果是按照公式计算出的数值，如果对象尺寸大于元素尺寸，计算后会往反向移动 ( 类似设定负值的 px )，如果对象尺寸小于元素尺寸，计算后会顺向移动，这个写法会有“1～2”个属性值。

  ( 元素寬度 - 物件寬度 ) * x 偏移百分比 = x 方向偏移量
  ( 元素高度 - 物件高度 ) * y 偏移百分比 = y 方向偏移量
  

  属性值	等同属性值 ( top left )	说明
  50%	50% 50%	左往右偏移 50%，上往下偏移 50%
  50% 100%	-	左往右偏移 50%，上往下偏移 100%

• 位置偏移量 ( px、em、rem )

  使用非百分比的长度单位，在没有设定对齐关键字的状态下，采用“left top”的方式进行偏移，px 表示像素，em 表示元素本身字号，rem 表示根元素字号，设定负值会往反方向移动，这个写法会有“1～2”个属性值。

  属性值	等同属性值 ( top left )	说明
  50px	50px 50px	左往右偏移 50px，上往下偏移 50px
  50px 100px	-	左往右偏移 50px，上往下偏移 100px

• 混合对齐关键字与位置偏移量

  将“对齐关键字”和“位置偏移量”组合，就能指定“哪个方向的偏移量”，这个写法会有“4”个属性值，注意，不支援使用 center 位置关键字。

  属性值	等同属性值	说明
  right 20% bottom 20%	-20% -20%	右往左偏移 20%，下往上偏移 20%
  left 20% top 20%	20% 20%	右往左偏移 20%，上往下偏移 20%

下列范例会让不同的 div 呈现不同的 object-position 效果。

线上展示：https://codepen.io/oxxo/pen/GRVVZbE

<!-- HTML 程式碼-->
object-position: center;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: center top;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: right bottom;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: 50px 50px;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: left 50px top 50px;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">
object-position: right 50px bottom 50px;
<img src="https://steam.oxxostudio.tw/download/css/mask-demo-05.jpg" alt="">

<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 10px  0 20px 0;
    width: 200px;
    height: 200px;
    display: block;
    object-fit: none;
  }
  img:nth-of-type(1) {object-position: center;}
  img:nth-of-type(2) {object-position: center top;}
  img:nth-of-type(3) {object-position: right bottom;}
  img:nth-of-type(4) {object-position: 50px 50px;}
  img:nth-of-type(5) {object-position: left 50px top 50px;}
  img:nth-of-type(6) {object-position: right 50px bottom 50px;}
</style>

运用 object-position 实作 sprite 图片效果

所谓的“sprite 图片”，是将“分别显示的多张图片整合为一张图片”，并运用“定位”的方式设定该图片的位置，这种方式可以减少网站启动时图片传输的请求 ( request )，让原本要加载多次不同的图片，变成只加载一张图片即可，进而提升网站效能，通常在网站中实作 sprite 图片，都会使用 background-image 和 background-position 互相搭配，但透过 object-position，也可以在不额外撰写其他元素的状态下，单纯运用 <img> 元素实现 sprite 图片效果。

下方范例会使用一张九宫格图片，让九张图片分别呈现不同的数字。

线上展示：https://codepen.io/oxxo/pen/bGXXpPv

<!-- HTML 程式碼-->
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">
<img src="https://steam.oxxostudio.tw/download/css/border-img-2.jpg">


<!-- CSS 程式碼 -->
<style>
  img {
    border: 2px solid #000;
    background: #f50;
    margin: 5px;
    width: 100px;
    height: 100px;
    object-fit: none;
  }
  img:nth-of-type(1) {object-position: top left;}
  img:nth-of-type(2) {object-position: top center;}
  img:nth-of-type(3) {object-position: top right;}
  img:nth-of-type(4) {object-position: center left;}
  img:nth-of-type(5) {object-position: center;}
  img:nth-of-type(6) {object-position: center right;}
  img:nth-of-type(7) {object-position: bottom left;}
  img:nth-of-type(8) {object-position: bottom center;}
  img:nth-of-type(9) {object-position: bottom right;}
</style>

小结

object-fit 和 object-position 是一个比较新颖的 CSS 样式属性，透过“可置换元素”的“对象”和“元素”特性，就能在不需要额外元素的状态下，实现 sprite 图片的效果，是相当方便的功能。

意见反馈