如何仅使用 CSS 来保持 Div 的长宽比？

通过响应式调整大小保留 Div 尺寸的纵横比

响应式网页设计的关键方面之一是确保元素无缝适应不同的环境屏幕尺寸，同时保持其固有特征。想象一下，您想要创建一个遵循特定宽高比的 div 元素，类似于使用百分比宽度或高度指定时图像的行为。不用 JavaScript 就能完成这个任务是否可行？

答案是肯定的。您可以利用纯 CSS 的力量来实现此效果，如以下示例所示：

.wrapper {
  width: 50%;
  display: inline-block;
  position: relative;
}

.wrapper:after {
  padding-top: 56.25%;
  display: block;
  content: '';
}

.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: deepskyblue;
  color: white;
}

<div class="wrapper">
  <div class="main">
    This is your div with the specified aspect ratio.
  </div>
</div>

在此代码段中，“.wrapper”div 用作容器，其宽度设置为 50%（您可以将其调整为您想要的大小）。关键在于“.wrapper:after”伪元素。通过将其 padding-top 设置为 56.25%，即所需纵横比的倒数（本例中为 16:9），容器的高度将自动调整以保持正确的比例。

“ .main” div 绝对位于“.wrapper”内并填充整个区域。它展示了纯色背景色和对比鲜明的文本，以提高可见性。

利用此技术，您可以创建响应式 div，轻松保持其纵横比，确保在各种设备和屏幕尺寸上保持一致的视觉美感。

以上是如何仅使用 CSS 来保持 Div 的长宽比？的详细内容。更多信息请关注PHP中文网其他相关文章！