时间戳

首页 > 解决方案 > 如何修复 div 纵横比？

javascript - 如何修复 div 纵横比？

问题描述

div当浏览器大多水平或垂直时，我需要将纵横比保持为 4:3。并且需要 div 大小随着浏览器窗口的增加而增加。

我找到了这个解决方案来设置padding-bottom: 75%; width: 100%;. 当浏览器窗口主要是垂直时，它可以工作，但是当浏览器窗口主要是水平时，我没有得到想要的结果。

你有什么主意吗？你会推荐使用Javascript吗？如果是这样，那怎么办？

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  border: 1px solid red; 
  padding-bottom: 75%;
  width: 100%;
}
</style>
</head>
<body>
<div class="ex1"/>
</body>
</html>

在此处输入图像描述

标签： javascripthtmlcsspadding

解决方案

使用 padding hack 来获取元素比率不适用于边框 - 边框使它成为方形。以下是 2 种情况，一种没有最大宽度容器，另一种有。

body {
  padding: 0;
  margin: 0;
}

.r-4by3-wrap {
  max-width: calc(100vmin * 4 / 3);
  margin: auto;
}

.r-4by3 {
  height: 0;
  padding-top: 75%;
}
<div class="r-4by3-wrap">
  <div style="border: 10px solid red">
    <div class="r-4by3" style="background: pink">
    </div>
  </div>
</div>

推荐阅读