在網頁制作中，經常會出現需要動態設置圖片比例的情況，比如制作輪播圖時需要將多張圖片按照固定比例進行展示。那么該如何使用 HTML 實現動態設置圖片比例呢？

<!-- HTML 代碼 -->
<div class="slider">
<img src="image1.jpg" class="slider-img" data-aspect-ratio="0.5">
<img src="image2.jpg" class="slider-img" data-aspect-ratio="0.5">
<img src="image3.jpg" class="slider-img" data-aspect-ratio="1">
<img src="image4.jpg" class="slider-img" data-aspect-ratio="1">
</div>

在上述 HTML 代碼中，我們給每張圖片添加了一個 data-aspect-ratio 屬性，用于指定該圖片的寬高比。接下來，我們可以使用 CSS 實現動態設置圖片比例的效果。

/* CSS 代碼 */
.slider {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.slider-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.slider-img[data-aspect-ratio="0.5"] {
padding-bottom: 50%;
}
.slider-img[data-aspect-ratio="1"] {
padding-bottom: 100%;
}

在上述 CSS 代碼中，我們首先設置了輪播圖容器的寬高，并添加了相對定位和溢出隱藏的屬性。接下來，我們使用絕對定位和 padding-bottom 屬性來實現動態設置圖片比例的效果。當 data-aspect-ratio 屬性值為 0.5 時，我們將 padding-bottom 設置為 50%，即為容器寬度的一半；當該屬性值為 1 時，我們將 padding-bottom 設置為 100%，即為容器寬度的完整高度。

通過上述代碼，我們就可以實現在 HTML 中動態設置圖片比例的效果，方便地制作出各種具有不同寬高比的圖片展示效果。