原码笔记

原码笔记

一行css代码解决图片统一大小后的拉伸问题(object-fit)

小诸哥 0

一、先来个实战

1. 测试案例

需求: 要求表情库里所有表情包大小都固定

实际效果: 由于图片原始大小都不一样,强行设定大小值会导致拉伸,如果不设定大小则参差不齐。例如:

  1. //html
  2. <body>
  3.      <img src="1.jpg" />
  4.      <img src="2.jpg" />
  5.      <img src="3.jpg" />
  6.      ....
  7. </body>
  8.  
  9. //css
  10. img{
  11.      width: 80px;
  12.      height: 80px;
  13.      margin-right: 10px;
  14. }

2. 解决方法

大多数都是利用background-size: cover 来避免对图片造成的压缩或者拉伸。

小巧而强大的object-fit

object-fit似乎是被人忽视的一个CSS3属性。因为存在兼容性,所以没有background-size好用,但是由于某种情况,你不得不用img标签来引入图片,这时候用object-fit是很好的选择。

CSS3 background-size出现的比较早,大家应该知道其支持的一些值,除了数值之外,其还支持几个关键字,例如:cover, contain等。

object-fit也是类似的,但还是有些差异,具体有5个值:

.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一致

我们给上图所有img都统一加上object-fit: cover;属性,看看效果:

完美解决!真的很方便,只需要一行css

我们具体学一下object-fit

属性描述
fill默认值。整个对象将完全填充此框。 如果对象的高宽比不匹配其框的宽高比,那么该对象将被拉伸以适应。
contain整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不匹配,该对象将被添加“黑边”。
cover被替换的内容大小保持其宽高比,同时填充元素的整个内容框。 如果对象的宽高比与盒子的宽高比不匹配,该对象将被剪裁以适应。
none内容尺寸不会被改变。
scale-down内容的尺寸就像是指定了none或contain,默认应用尺寸最小的值

我们用一张图片作为例子解析以上上面各个属性:

  1. //html
  2.  
  3. <div>
  4.      <img src="./public/test.jpg" class="initImg"/>
  5.      <p>图片初始化</p>
  6. </div>
  7.  
  8. <div>
  9.      <img src="./public/test.jpg" class="initImg fillImg"/>
  10.      <p>object-fit:fill</p>
  11. </div>
  12.  
  13. <div>
  14.      <img src="./public/test.jpg" class="initImg containImg"/>
  15.      <p>object-fit:contain</p>
  16. </div>
  17. </br>
  18.  
  19. <div>
  20.      <img src="./public/test.jpg" class="initImg coverImg"/>
  21.      <p>object-fit:cover</p>
  22. </div&gt;
  23.  
  24. <div>
  25.      <img src="./public/test.jpg" class="initImg noneImg"/>
  26.      <p>object-fit:none</p>
  27. </div>
  28.  
  29. <div>
  30.      <img src="./public/test.jpg" class="initImg scaleDownImg"/>
  31.      <p>object-fit:scale-down</p>
  32. </div>
  33.  
  34.  
  35. //css
  36. body div{
  37.      display: inline-block;
  38.      text-align: center;
  39. }
  40. .initImg{
  41.      width: 150px;
  42.      height: 80px;
  43. }
  44. .fillImg{
  45.      object-fit: fill;
  46. }
  47. .containImg{
  48.      object-fit: contain;
  49. }
  50. .coverImg{
  51.      object-fit: cover;
  52. }
  53. .noneImg{
  54.      object-fit: none;
  55. }
  56. .scaleDownImg{
  57.      object-fit: scale-down;
  58. }

这里稍微解释一下:

  1. fill: 默认值,和未设置一样。会将图片压缩拉伸
  2. contain: 当宽/高的值达到父容器规定的最小宽/高时,则对应的另一个值会按照原始宽高比进行生成。例如上面,图片的高度达到父容器高度后,宽度按照比例生成,导致左右留白
  3. cover: 和contain不一样,cover是以最大值为规定的。例如上图,图片的高度(较小值)首先达到父容器高度后,而宽度并未达到父容器的宽度,图片会继续'生长',直到宽度达到和父容器宽度一致。而等比伸缩的高度会溢出,溢出部分裁剪
  4. none: 顾名思义宽高对图片不起作用,即使设置了固定的宽高,图片仍然以原始大小展现,但是超出设置的值会被遮挡
  5. scale-down: 以contain或none图片最小尺寸为标准.

以上就是object-fit的全部用法。

很简单,但是很强大

当然,也可以用background-size解决图片伸缩问题

例如淘宝网:

当从文章提取的图片和文章list的展示块尺寸比例不一致的时候,背景图可通过指定 background-size:contain | cover 来避免对图片造成的压缩或者拉伸。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

标签: 拉伸 图片统一 object-fit