CSS 中的圖片正方形響應式是一種在各種設備上顯示圖片的方法。通過使用 CSS 樣式，可以在不失真或拉伸圖片的情況下，在各種尺寸的設備上正確顯示圖片。

.container{
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.image{
width: 100%;
height: 0;
padding-bottom: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 768px){
.image{
height: 0;
padding-bottom: 50%;
}
}

首先要有一個容器，在這里我們使用了一個類名為 "container" 的 div 元素。它的寬度設置為 100% 并居中顯示。在容器內，我們需要一個承載圖片的元素，這里使用了一個類名為 "image" 的 div 元素。通過使用 padding-bottom 的百分比，我們可以將元素的寬高比例設置為 1:1，從而使其變成正方形。為了使圖片能夠在元素內居中并按比例伸縮，我們使用了 background-position、background-repeat 和 background-size 屬性。

在上面的代碼中，我們還應用了媒體查詢，以便在設備寬度大于 768px 時，將元素的高度設置為寬度的一半，從而使其在大屏幕上變?yōu)橐粋€ 2:1 的長方形。

通過使用上述 CSS 樣式，我們可以輕松地創(chuàng)建出一個響應式的圖片正方形，以適應不同設備的尺寸和分辨率。這不僅可以提升用戶體驗，還可以提高網(wǎng)站的視覺吸引力。