在調整頁面大小或在不同設備上查看頁面時保持寬高比

我正在開發一個項目，並且希望我的網頁在任何設備上調整大小或查看時都保持其風格和縱橫比。我試圖在CSS上使用position屬性（position：fixed;），但它不起作用。這怎麼可以使用CSS來完成？在調整頁面大小或在不同設備上查看頁面時保持寬高比

來源

2016-07-27 taiwoorogbangba

長寬比是不是你可以通過一些原生屬性值設置 - 它從你的整體頁面佈局推斷。如果您的主體文本左側有一個高大的橫幅，它位於視口中央，跨度則表示其高度，那麼由於橫幅爲左側，您的縱橫比會增加。在你的案例中保持縱橫比是關於維護你的佈局。在這方面，網頁不是視頻框架。它的內在比率大約是 – amn

。有一個衆所周知的黑客..與填充和絕對位置：http://alistapart.com/article/creating-intrinsic-ratios-for-video ...但會有http://stackoverflow.com/questions/18294294/how-does-intrinsic-work – munomono

@amn，謝謝你的解釋。 – taiwoorogbangba

figure { 
 
    width: 36%; 
 
    margin: 8px auto; 
 
} 
 
    
 
div.relative_div { 
 
    width: 100%; 
 
    padding-bottom: 56.25%; /* 16:9 */ 
 
    position: relative; 
 
    background: black; 
 
} 
 
    
 
div.relative_div > div { 
 
    position: absolute; 
 
    top: 0; bottom: 0; left: 0; right: 0; 
 
    color: white; 
 
    font-size: 24px; 
 
    text-align: center; 
 
}

<html> 
 
<body> 
 
<figure> 
 
    <div class="relative_div"> 
 
     <div>Relative Aspect Ratio </div> 
 
    </div> 
 
</figure> 
 
</body> 
 
</html>

正如你可以在CSS中看到的，我們要做的就是鳥巢「快速響應」基於百分比寬度的父元素中以100％的寬度的元素，然後聲明根據我們想要維護的比率計算底部或頂部填充的百分比。爲了計算所需要的任何縱橫比，我們可以使用下面的公式的百分比：

B /（A/100）= C％因此，對於16

：9（其中，16是A和圖9是B）：

9/0.16 = 56.25（％）的網頁

來源

2016-07-27 11:00:18

不錯的工作，它工作 –

在調整頁面大小或在不同設備上查看頁面時保持寬高比

回答

相關問題