保持固定高度的高寬比

Question

所以我想要保持高度固定的div的特定高寬比。在過去，我已經這樣做了，但只能使用一個固定的寬度這樣的時候：

.one-one { 
    position: relative; 
} 
.one-one:before { 
    display: block; 
    content: " "; 
    width: 100%; 
    padding-top: 56.25%; 
    /* Ratio of 16:9 (16w:9h) 
    * (h/w) * 100 = % 
    * (9/16) * 100 = % 
    * 0.5625 * 100 = 56.25% 
    * 1:1 = 100% 
    */ 
} 

所以這就是我如何使用100％的固定寬度在這個例子中做到這一點。不過，這次我想製作一個固定高度爲100％並且比例爲4：7（4w：7h）的iPhone模型。使用固定高度，我可以設置100％的高度和100％的最大高度，以便在仍保持4：7的比例時不會溢出頁面。那麼，有沒有人知道你會怎麼做？使用此方法或其他方法。

感謝您的幫助！

Answer 1

您可以：

• 將與你的目標元素內的所需比替換元素。

  例如，它可以是具有所需固有尺寸的圖像或畫布。

  樣式與height: 100%此替換元件，使得其跨越整個目標元素。

  讓它具有默認width: auto，使得其寬度尊重縱橫比。

  與display: block風格，以避免長時間extra space below image問題。

• 使目標元素使用shrink-to-fit width算法計算其寬度，以便它「繼承」替換元素的高寬比。

  例如，您可以通過浮動或用display: inline-block實現這一目標。

• 如果您希望目標元素有內容，將它們放置在一個絕對定位的包裝，以防止他們改變目標元素的大小。

  作出這樣的包裝一樣大，與top:0; right:0; bottom:0; left:0目標元素，使目標元素的相對容器。

這應該有效。但是，由於某些原因，瀏覽器在窗口大小調整時似乎沒有更新寬度，所以它只能在最初使用。用JS強制重新解決這個問題。

var s = document.getElementById('aspect-ratio'), 
 
    p = s.parentNode, 
 
    n = s.nextSibling; 
 
window.addEventListener('resize', function() { 
 
    // Force a rerender 
 
    p.removeChild(s); 
 
    p.insertBefore(s, n); 
 
});

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
#aspect-ratio { 
 
    height: 100%;  /* Some fixed height */ 
 
    float: left;  /* Shrink-to-fit width */ 
 
    position: relative; /* Containing block for #contents */ 
 
    background: orange; 
 
} 
 
#aspect-ratio > canvas { 
 
    height: 100%;  /* Span #aspect-ratio entirely */ 
 
    display: block;  /* Remove space below canvas */ 
 
} 
 
#aspect-ratio > #contents { 
 
    overflow: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
}

<div id="aspect-ratio"> 
 
    <canvas height="16" width="9"></canvas> 
 
    <div id="contents">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</div> 
 
</div>