讓三欄式網格式的圖片自動縮小

Posted in :

2024-02-05

在套用bootstrap 時, 不小心把 img tag 放到 card 裡, 大多數的情況下, image 是以原圖方式顯示, 縮小的話, 需要自定寬度, 如果設定絕對的寬度, 就需要自義左右造成的空白間隙.

比較方便的做法, 是直接填滿某一個網格, 然後再格子裡設定間距, 做出來的執行效果:

中間神奇的關鍵是 row-cols-md-3, 滿神奇的, 加了這個class , 圖片就自動縮到格子裡, 後面加 g-3 是要讓邊邊不要直接摸到圖片的線條。

發佈留言取消回覆