商品照片大小不一，要如何整齊排版?

製作商品葉片時，通常會需要將很多不同的商品照片擺放在一起，但是商品照片都不一樣大，該如何整齊排列呢?
說到照片大家馬上想到的兩個方法應該就是 background-image 和 img。

background-image

背景圖片的原理，就是先建立一個有長寬的容器，讓圖片在容器的背景上顯示。
通常會是這樣

img{
 width: 100%;
 height: auto;
 } 
 .box{
     width: 100px;
     height: 300px;
     background-image: url('xxx');
     background-repeat: no-repeat;
     background-position: center center;
     background-size: cover;
 }

使用背景圖片的方式可以讓背景圖片跟著容器放大縮小、或是隨意調整位置。
不過這樣的做法就是要一個一個把圖片塞入CSS屬性內，而且要硬性把容器的大小寫出來。

因此 img 就出現了一個新的CSS屬性，object-fit讓圖片可以做到背景圖片的優點，但又更加方店。

<img class="photo" src="xxx" alt="sxxx" />
<style>
img{
    width: 100%;
    height: auto;
}
.photo{
    height: 300px
    object-fit: cover
}
</style>

CodePen 參考