我有youtube的嵌入
<iframe id="you" style="max-width:100%;" width="672" height="378" src="https://www.youtube.com/embed/rMCILWXXXXX"> 我為手機設定了max-width:100%;。
我為手機設定了max-width:100%;。
當螢屏尺寸低于672時，iframe就會變小。
但是高度卻沒有，即使我設定了height="auto"它也沒有保持比例。
我怎樣才能做到這一點呢？
我不能只用css來做這個嗎？
我需要使用jquery或其他東西來保持比例？
uj5u.com熱心網友回復：
你可以使用屬性aspect-ratio
iframe{
aspect-ratio: 16 / 9。
}
來源。https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
uj5u.com熱心網友回復：
我通常在iframe周圍添加一個包裝器，并將包裝器的高度和寬度設定為100%。然后你可以給iframe一個100%的最大寬度和最大高度。
我還洗掉了主體的邊距和iframe的邊框，以防止滾動條的出現。
。html, body {
height: 100%;
margin: 0;
}
div.wrapper {
width: 100%;
height: 100%。
}
iframe#you {
max-width: 100%;
max-height: 100%;
border: unset;
}<div class="wrapper"> /span>
< iframe id="you" width="672" height="400" src="https。 //www. youtube.com/embed/rMCILWXXXXX"></iframe>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/306701.html
標籤：