自动调整 Div 元素大小时如何保持宽高比？

如何在自动调整 Div 元素大小的同时保持宽高比

创建一个在保持特定宽高比的同时自动调整其大小的 div 元素可能是一个挑战。目标是确保 div 在窗口内保持居中，根据需要缩小或扩展以适应可用空间而不扭曲其形状。

实现这一目标的关键在于利用允许宽高比的 CSS 属性控制和自适应大小。宽高比属性是 CSS3 中引入的一个强大工具，使开发人员能够指定高度和宽度之间的固有比率。无论可用空间如何，都会保持此比例。

除了宽高比之外，min-width 和 min-height 属性还可用于建立 div 的最小尺寸。通过组合这些属性，我们可以创建一个遵循指定宽高比的 div 元素，同时也适合可用的窗口空间。

考虑以下 CSS 代码：

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: gray;
}


.stage {
  --r: 960 / 540;

  aspect-ratio: var(--r);
  width:min(90%, min(960px, 90vh*(var(--r))));

  display: flex;
  justify-content: center;
  align-items: center;


  background: linear-gradient(30deg,red 50%,transparent 50%),
    chocolate;
}

在此示例中，我们定义一个 --r 变量来存储 960 到 540 的比率，代表所需的宽高比。然后使用宽高比属性来维持此比例。

宽度属性设置为可用宽度的 90%（960px）或根据可用高度和宽高比计算出的宽度中的最小值。这确保了 div 在适合窗口时保持指定的比例。

min-width 和 min-height 属性没有显式设置，但它们的默认值 auto 将允许 div 缩小以适应较小的窗口尺寸，同时仍保留纵横比。

display 属性设置为 flex 以在包装 div 内启用居中对齐，并且 justify-content 和align-items 属性用于使内容在包装内居中div.

因此，舞台 div 元素将自动调整大小，同时保持其纵横比，确保无论窗口尺寸如何，它都保持居中且视觉上一致。

以上是自动调整 Div 元素大小时如何保持宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！