CSS縱橫比技巧指的是創建響應式網頁時，用來自適應不同屏幕尺寸和方向的圖片。這里有一些常用的方法：

/* 基于元素的縱橫比 */
.box {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16：9 縱橫比 */
background-image: url('image.jpg');
background-size: cover;
background-position: center center;
}

在這個例子中，我們通過設置padding-bottom來生成一個基于元素的縱橫比，它會自動調整高度，以適應容器大小。這里的56.25%是16：9寬高比的倒數。

/* 基于偽元素的縱橫比 */
.box {
position: relative;
width: 100%;
}
.box::before {
content: "";
display: block;
padding-bottom: 56.25%; /* 16：9 縱橫比 */
}
.box img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
top: 0;
left: 0;
}

這種方法同樣基于縱橫比，但使用偽元素來創建一個不占空間的占位符。這個占位符的大小是通過padding-bottom來實現，還需將位置設定為relative。圖片是用絕對定位來放置到這個占位符上的，并通過屬性object-fit: cover來保留寬高比，同時填充整個容器。

/* 基于viewport單位的縱橫比 */
.box {
width: 100vw;
height: 56.25vw; /* 16：9 縱橫比 */
background-image: url('image.jpg');
background-size: cover;
background-position: center center;
}

這種方法基于viewport單位來創建一個容器，這樣就可以使用vw單位，即相對于viewport寬度的單位。這里的高度也是通過寬高比來確定的。

總的來說，縱橫比技巧是響應式網頁設計中的必備技能，無論你是選擇基于元素、偽元素、viewport單位或其他方法，它們都能讓你的圖片在不同的設備和屏幕尺寸下都保持良好的顯示效果。