保持固定高度的高宽比

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>