僅在CSS中維護div的高寬比

如果我有一個元素（例如div＃框架），我希望儘可能多地填充屏幕，同時仍然保持指定的高寬比（如16： 9），我必須申請哪些款式？我確定Javascript中有一些不同的解決方案，但我想嘗試一種只有CSS的方法。僅在CSS中維護div的高寬比

我已經搜索了四周，雖然已經有some solutions in CSS，但它們使用百分比填充，它是通過寬度的值計算的，這意味着寬高比僅在瀏覽器水平調整大小時保留，而不是垂直調整大小。

#frame 
{ 
    /* centered */ 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    margin: auto; 
    position: fixed; 

    /* aspect ratio */ 
    width: 100%; 
    height: 0px; 
    padding-bottom: 56.25%; 
}

此作品不夠好，但我想在水平和垂直方向調整，因爲我下面嵌入在圖像中看到，仍然會保持該元素的縱橫比的解決方案。

enter image description here

來源

2014-06-09 Arcym

我不認爲它是可以設定基於所述高度的元件的寬度，使用CSS特性，他們被認爲可以使用。所以你最好開始考慮那裏的JS;）雖然有一個涉及圖像的黑客攻擊，但它並不好。也許你可以擴展這個想法（我仍然更喜歡JS）。

您將需要一個圖像，您想要的幀的最大尺寸。一個透明的gif應該做的。然後，讓圖像的本地行爲設置包裝器的大小，在包裝器上使用inline-block。然後你使用包裝內的絕對定位的元素來保存你的內容：

<div class="wrapper"> 
    <img src="https://cdn.boldernet.net/0/0/856/856567-450.jpg"> 
    <div class="content"> 
     content 
    </div> 
</div>

CSS：

body { 
    text-align: center; 
} 

.wrapper > img { 
    display:block; 
    max-width: 100%; 
    max-height: 100%; 
} 
.wrapper { 
    display: inline-block; 
    position: relative; 
    top: 50%; 
} 
.content { 
    position: absolute; 
    background: blue; 
    left: 0; 
    top: -50%; 
    width:100%; 
    height:100%; 
}

來源

2014-06-09 05:20:24

僅在CSS中維護div的高寬比

回答

相關問題