保持纵横比具有固定高度-Java 学习之路

所以我想保持一个特定的长宽比 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的比例 . 那么，有谁知道你会怎么做？使用此方法或其他方法 .

谢谢你的帮助！

1 回答

您可以：

在目标元素中放置具有所需比率的替换元素 .

例如，它可以是具有所需内在大小的图像，也可以是画布 .

使用 height: 100% 设置此替换元素的样式，以便它跨越整个目标元素 .

让它具有默认的 width: auto ，以使其宽度与纵横比相关 .

使用 display: block 设置样式以避免extra space below image问题 .

使目标元素使用shrink-to-fit width算法计算其宽度，使其成为被替换元素的纵横比"inherits" .

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

回复于 2024-05-14T03:38:28+08:00

保持纵横比具有固定高度

1 回答

相关问题