CSS中設置元素的寬高比非常重要，特別是設計響應式網頁時。廣告條、圖片、視頻和音頻等元素的寬高比必須與容器的寬高比相匹配，否則將會影響整個頁面的布局。

下面是一些CSS代碼示例，可以幫助您設置寬高比：

/* 使用padding-bottom方法設置固定比例的元素 */
.box {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* 16:9 寬高比 */
}
.box iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* 使用固定寬高比例設置元素大小 */
.image {
width: 100%;
height: 0;
padding-bottom: 80%; /* 4:5 寬高比 */
background-image: url('image.jpg');
background-size: cover;
background-position: center;
}
/* 使用vw和vmin等相對尺寸設置寬高比 */
.video {
width: 90vw;
height: 50vmin;
max-width: 800px;
max-height: 450px;
}
/* 使用絕對定位和transform調整大小和位置 */
.audio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 10%;
background-color: #f2f2f2;
}
.audio audio {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
}

總的來說，您可以使用padding-bottom、vw、vmin、絕對定位和transform等方法來設置網頁元素的寬高比，以適應各種設備和屏幕尺寸。希望這些示例代碼能夠幫助您在設計響應式網頁時更加輕松自如！