在現代網頁設計中，我們經常需要在不同裝置和螢幕大小下展示圖片。有時，我們希望圖片能夠以方型的形式呈現，並自動適應其父容器的寬度。在這篇文章中，我們將使用純 CSS 技術來實現這樣的效果。
HTML 結構
首先，讓我們來看一下 HTML 結構。我們將使用以下代碼：
<div class="image-square">
<img src="https://source.unsplash.com/random" alt="圖片描述">
</div>
在這個結構中，我們使用了一個包含 image-square 類別的容器，並在其中插入一個 <img> 元素。src 屬性設置為 Unsplash 提供的隨機圖片 URL，這樣我們可以獲得一個無版權的圖片來完整演示這個範例。
CSS 樣式
現在，我們來看一下 CSS 樣式，以實現方型圖片並使其自適應父容器的寬度。
.image-square {
width: 100%;
height: 0;
padding-bottom: 100%;
position: relative;
overflow: hidden;
}
.image-square img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}在這個 CSS 樣式中，我們對 .image-square 類別設置了以下屬性：
width: 100%：將容器的寬度設置為父容器的100%。height: 0：初始高度設置為0。padding-bottom: 100%：使用padding-bottom屬性設置容器的高度為寬度的百分比，這樣我們就可以創建一個方形容器。position: relative：設置相對定位以使圖片定位在容器內。overflow: hidden：隱藏溢出的部分。
對於 .image-square img 選擇器，我們設置了以下屬性：
width: 100%：將圖片的寬度設置為100%，以填滿容器的寬度。height: 100%：將圖片的高度設置為100%，以填滿容器的高度。object-fit: cover：使用object-fit屬性設置圖片以覆蓋整個容器，並保持比例。position: absolute：將圖片設置為絕對定位，以使其相對於容器定位。top: 0和left: 0：將圖片置於容器的頂部和左側。
完整示例
您可以在 CodePen 上查看完整的示例，並進行測試和修改。
See the Pen Untitled by VECTOR.cool 威得數位 (@ann71727) on CodePen.
結論
透過使用純 CSS 技術，我們可以輕鬆地創建方型圖片容器並實現自適應父容器寬度的效果。這個技巧可以應用於各種網頁設計場景中，為使用者提供更好的視覺體驗。透過設置容器的寬度為父容器的百分比，並使用 padding-bottom 屬性創建一個方形容器，我們可以確保圖片在不同裝置和螢幕大小下都能自動調整大小，並保持比例。這種技術的優點是簡單且無需任何 JavaScript 庫或框架的依賴。希望這篇文章能幫助您理解如何使用純 CSS 創建自適應的方型圖片容器。
