保持固定高度的纵横比

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% 的固定宽度的方法。但是，这次我想制作一个 iPhone 模型，其中固定高度为 100%，比例为 4:7（4w:7h）。使用固定高度，我可以设置 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>