【CSS】【Bootstrap】让图片满版的object-fit

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

在使用Bootstrap横向卡片元件时，<img>本身加上了img-fluid这个class
img-fluid是Bootstrap的class，用途是max-width: 100%和height: auto
因此，当图片过大时，最大就只会是等於父元素宽度
然而，虽然没有破版，但因为宽度变窄，高度也变低了，此时排版就出了问题

范例：https://codepen.io/linchinhsuan/pen/vYWPMPm?editors=1100

在这个案例中我们可以看到，我们使用了官方的card元件，但最终呈现的视觉效果却不是我们所希望的

既然高度不够，那就让它height: 100%？

因为height: auto的关系，所以高度是根据图片比例决定的，例如图片是200x100，但父元素最大只给你宽100，就会被缩到100x50（维持宽高2:1）
我们可以透过height: 100%去强制改变它的高度
不过这里要注意一个小细节，因为img-fluid本身设定了height: auto，而且img-fluid是class，所以如果只是写：

img{
  height: 100%;
}

是不会有效果的，因为HTML标签的CSS权重不够

因此，这里使用Bootstrap的class来盖过它，我们使用h-100
范例：https://codepen.io/linchinhsuan/pen/BambeQq
此时没有满版的问题解决了，但新的问题接踵而来，图片变形了
其实很好理解，例如本来是200x100（宽高2:1）的图片为了满版强行被拉成200x200，变形是理所当然的

那，又该如何不让图片变形，又让它满版呢？

用object-fit处理图片变形

范例：https://codepen.io/linchinhsuan/pen/NWwJVKO?editors=1100

object-fit这个CSS属性是本篇的重点
我们自订一个class，并加入这段程序码：

object-fit: cover;

此时，图片就会维持原本的比例放大到宽高两边都至少满版为止
听起来有点拗口
举例来说如果空间是200x200的正方形，图片是200x100，那图片就会被放大到400x200
这就同时保持了图片的正确比例，和满版的需求了

object-fit的其他值

object-fit这个CSS属性有很多值可以设定
范例：https://codepen.io/linchinhsuan/pen/gOXEJbe?editors=1100

fill是预设值
cover是让图片维持原本的比例放大到宽高两边都至少满版为止
contain是让图片维持原本比例放大到其中一边满版为止，例如空间是200x200，图片是100x70，就只会被放大到200x140（因为一边已经满版了），但图片比例维持不变，不会变形
none是不会缩放图片，图片多大就多大，但不会破版（超出父元素）
scale-down是在contain和none之间二择一，如果contain的情况图片是200x140，而none的情况图片是2000x1400，就选择比较小的那个，在本案例中，因为原图相当大，但我只给了父元素200x200的空间所以scale-down就跟contain一样