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


Posted by hoyi-23 on 2021-07-22

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

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 參考


#object-fit







Related Posts

V-for 的使用

V-for 的使用

2/2 Java Full Stack GenSpark

2/2 Java Full Stack GenSpark

Chapter 1. 重構:第一個範例

Chapter 1. 重構:第一個範例


Comments