在現代網頁設計中，我們經常需要在不同裝置和螢幕大小下展示圖片。有時，我們希望圖片能夠以方型的形式呈現，並自動適應其父容器的寬度。在這篇文章中，我們將使用純 CSS 技術來實現這樣的效果。
HTML 結構
首先，讓我們來看一下 HTML 結構。我們將使用以下代碼：
在這個結構中，我們使用了一個包含 image-square 類別的容器，並在其中插入一個 <img> 元素。src 屬性設置為 Unsplash 提供的隨機圖片 URL，這樣我們可以獲得一個無版權的圖片來完整演示這個範例。
CSS 樣式
現在，我們來看一下 CSS 樣式，以實現方型圖片並使其自適應父容器的寬度。
在這個 CSS 樣式中，我們對 .image-square 類別設置了以下屬性：
對於 .image-square img 選擇器，我們設置了以下屬性：
完整示例
您可以在 CodePen 上查看完整的示例，並進行測試和修改。
See the Pen
Untitled by VECTOR.cool 威得數位 (@ann71727)
on CodePen.
結論
透過使用純 CSS 技術，我們可以輕鬆地創建方型圖片容器並實現自適應父容器寬度的效果。這個技巧可以應用於各種網頁設計場景中，為使用者提供更好的視覺體驗。透過設置容器的寬度為父容器的百分比，並使用 padding-bottom 屬性創建一個方形容器，我們可以確保圖片在不同裝置和螢幕大小下都能自動調整大小，並保持比例。這種技術的優點是簡單且無需任何 JavaScript 庫或框架的依賴。希望這篇文章能幫助您理解如何使用純 CSS 創建自適應的方型圖片容器。
[……]
