如何创建高度等于其动态宽度的 CSS Div？

高度匹配动态宽度：CSS 流体布局

为了实现视觉平衡的设计，开发人员经常寻求对齐高度元素的宽度。这个问题解决了一个常见的设计挑战：如何创建高度等于宽度的 div，保持 1:1 的纵横比，同时允许宽度动态变化。

建议的解决方案涉及使用具有预定义宽高比的占位符元素。通过将主要元素放置在占位符内，即使主要元素的宽度发生变化，纵横比也能保持不变。关键在于利用诸如position和margin-top之类的CSS属性来战略性地对齐元素并确保它们的尺寸保持成比例。

以下代码片段演示了该方法：

#container {
  display: inline-block;
  position: relative;
  width: 50%;
}

#dummy {
  margin-top: 75%;
  /* 4:3 aspect ratio */
}

#element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: silver/* show me! */
}

在此例如，#container 建立了 div 的动态宽度。 #dummy 元素用作占位符，具有固定的 4:3 宽高比，通过 margin-top 属性实现。然后 #element 绝对定位在 #dummy 内，确保它填充整个区域并保持与宽度相同的 1:1 比例。

以上是如何创建高度等于其动态宽度的 CSS Div？的详细内容。更多信息请关注PHP中文网其他相关文章！