保持固定高度的情况下维持宽高比

Question

保持固定高度的情况下维持宽高比

3

我想要保持一个特定的

宽高比，其中高度是固定的。过去我已经这样做了，但只有在使用固定宽度时才能实现：

.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的比例。那么，有人知道如何做到这一点吗？无论是使用此方法还是其他方法。

感谢任何帮助！

- germainelol

您想要全屏高度，宽度为高度的4/7，对吗？在一个16:9屏幕的手机上，在纵向模式下会出现水平滚动条，您可以接受吗？ - Mr Lister

在横屏模式下，这意味着屏幕的三分之二将被浪费。 - Mr Lister

@MrLister 是的，所以宽度始终为4w：7h，其中高度为100%。我不确定你在使用案例中的意思是什么？但是，我认为我会设置一个最大宽度，这样也不会溢出。无论如何，一步一步来，首先我想能够使用4:7设置纵横比，然后我们再从那里开始！暂时来说，我会满足于水平滚动条。 - germainelol

@MrLister 如果屏幕没有被使用，那没关系，这只是为了我自己的学习目的。 - germainelol

你有研究过css3-viewports吗？http://www.w3.org/TR/css3-values/#viewport-relative-lengths - user4063815

@Teolha 是的，但我想要一种能在大多数浏览器上支持的解决方案。我不喜欢使用100vh之类的方法，因为每次我使用它时，总会遇到一堆无法正常工作的设备或浏览器。 - germainelol

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Oriol · Accepted Answer

你可以：

在目标元素内部放置一个具有所需比例的替代元素。

例如，可以使用具有所需固有大小的图像或画布。

用 height: 100% 样式设置此替换元素，以使其跨越整个目标元素。

将其默认宽度设置为 width: auto，以使其宽度遵循纵横比。

使用 display: block 样式进行修饰，以避免图像下方额外空间的问题。
使目标元素使用缩小到适合宽度算法来计算其宽度，以便“继承”替换元素的纵横比。

例如，您可以通过浮动它或使用 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>