HTML 是構(gòu)建網(wǎng)絡(luò)世界的重要技術(shù)，開(kāi)發(fā)者把各種內(nèi)容組成頁(yè)面展示在瀏覽器上。其中，寬高比是頁(yè)面設(shè)計(jì)中非常重要的一個(gè)因素。那么，讓我們來(lái)看看 HTML 中如何設(shè)置寬度和高度比例。 為了設(shè)置寬高比，請(qǐng)使用 CSS 或 HTML 的屬性 width 和 height。您可以使用它們中的任何一個(gè)，具體取決于您的需求。 如果您想設(shè)置一個(gè)更好的寬高比，您可以在 HTML 中直接通過(guò)設(shè)置以下代碼來(lái)實(shí)現(xiàn)：

<div style="width: 100%; padding-top: 56.25%; 
position: relative;">
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
frameborder="0" allow="autoplay; encrypted-media" 
allowfullscreen></iframe>
</div>

請(qǐng)查看上面的代碼。首先，我們使用 DIV 元素來(lái)創(chuàng)建一個(gè)邊框（由 padding-top 屬性實(shí)現(xiàn)）和自適應(yīng)寬度（由 width 屬性實(shí)現(xiàn)）的父容器。這里的 padding-top 數(shù)值是按比例的。為了獲得想要的寬高比（此處是 16:9 或 56.25%），請(qǐng)將此數(shù)值設(shè)置為：

(高度 ÷ 寬度) × 100%

此時(shí)，我們可以將您想要設(shè)置寬度和高度比例的內(nèi)容（在本例中是 YouTube 視頻）放入父容器中。為了讓嵌入的內(nèi)容適應(yīng)其父容器，我們必須先將其定位為絕對(duì)位置（由 position:absolute 屬性實(shí)現(xiàn)），然后將它的寬度和高度設(shè)置為 100%。 這就是將 HTML 寬高比例調(diào)整到所需比例的方法。現(xiàn)在，您可以自由地選擇并使用任何寬高比例，向用戶(hù)呈現(xiàn)一個(gè)精美的頁(yè)面。