處理寬度，並通過CSS圖像和媒體中/高度（設置寬度的高度= 200％）

假設爲媒體，這是一個Vimeo的視頻的寬度被設定爲100％，但如果我設置爲自動高度比身高出來是太低。處理寬度，並通過CSS圖像和媒體中/高度（設置寬度的高度= 200％）

後來，我設置的500像素高度爲視頻/多媒體，但有沒有辦法讓我可以設置寬度的200％的高度。

<iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

來源

2017-08-01 somethingnow

在這裏添加您嘗試過的代碼。 –

我添加的代碼，但問題或問題的看法幾乎不改變代碼。問題歸結爲在CSS中是否存在這樣的安排，不能說可以幫我才達到我想要的東西。 – somethingnow

試試這個，height: 56.25vw;將保持16:9寬高比

.wrapper { 
 
    position: relative; 
 
    height: 56.25vw; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
} 
 

 
.wrapper iframe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="wrapper"> 
 
    <iframe src="https://player.vimeo.com/video/113657402" width="100%" height="500" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe> 
 
</div>

來源

2017-08-01 10:42:21

可以使用VW單位爲元素的寬度和高度。這允許根據視口的寬度，以保持該元素的縱橫比（注：你也可以看到VH，如果你需要根據視口的高度，以保持寬高比）。

<iframe src="https://player.vimeo.com/video/113657402" width="10vw" height="20vw" frameborder="0" title="&quot;Super Sleuths&quot;" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>

來源

2017-08-01 10:55:19 Rahul

處理寬度，並通過CSS圖像和媒體中/高度（設置寬度的高度= 200％）

回答

相關問題