如何修复div的纵横比？

Question

如何修复div的纵横比？

3

我需要保持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>

- János

1

您介意再解释一下“但是[它]在浏览器窗口主要水平时不起作用”的含义吗？所以您的目标是让100%的div可见吗？ - Andy

如果您需要将此用于视频元素，请回答“是”，我会告诉您如何完全摆脱div。 - Bekim Bacaj

5个回答

2

如果我们考虑到需要以屏幕为参考，那么您可以通过添加一个vh单位的max-width来避免元素大于屏幕高度。比例为4:3，因此当元素的高度为100vh时，宽度需要为133.33vh，因此该元素的宽度不应超过此宽度。

您还需要对子元素应用填充技巧，因为在某些情况下父元素无法完全占满宽度，而填充与上级容器相关联。将其应用于div将导致错误的结果。

div.ex1 {
  border: 1px solid red;
  box-sizing:border-box; /* Don't forget this to include the border in the height/width*/
  width: 100%;
  max-width:133vh; /* 4/3 * 100vh */
  margin:auto;
}
div.ex1:before {
  content:"";
  display:block;
  padding-top:75%;
}
body {
 margin:0;
}

<div class="ex1"></div>

- Temani Afif

嗨！我已将您的解决方案及其呈现方式添加到问题中。我只能看到顶部一条红线。很奇怪。 - János

@János 你忘记了我的 CSS 代码的一大部分..请再检查一下。 - Temani Afif

0

您也可以使用媒体查询来检查宽高比，并相应地更改 div 的高度和宽度。

只是为了澄清：

vmin - 等于 vw 和 vh 中较小的一个。

引用自 developer.mozilla.org

考虑到这一点，我们可以像这样做：

<!DOCTYPE html>
<html>
<head>
  <style>
    body { padding:0; margin:0; text-align: center;}
    div.ex1 {
      border: 1px solid red;
      box-sizing: border-box;
      margin: 0 auto;
    }

    @media (min-aspect-ratio: 4/3) {
      div.ex1 {
        width: 133.33vmin;
        height: 100vmin;
      }
    }

    @media (max-aspect-ratio: 4/3) {
      div.ex1 {
        width: 100%;
        height: 75vw;
      }
    }
  </style>
</head>

<body>
    <div class="ex1"/>
</body>
</html>

- Ivan86

-1

我认为高度百分比不起作用，尝试使用 vh 代替百分比。

- Kaiiso

不要使用75％，而是使用75vh，即视口高度的75％ :) - Kaiiso

更改为75vh不保持纵横比。 - János

尝试将您的div高度设置为100vh。 - Kaiiso

如果您想要完全响应式的4:3宽高比，请使用JavaScript，这很容易实现。 - Kaiiso

看看我的另一个答案，自己尝试一下，如果需要帮助我会帮你的 :D - Kaiiso

-3

使用 JavaScript 的 window.onresize 事件

window.onresize = function(event) {
    // Here get the height of page and give them multiplied bu 4/3 to the width of div
};

- Kaiiso

我也在想同样的事情，但是楼主没有添加JavaScript标签。 - Ivan86

"OP" 是什么意思？很抱歉，我不明白 :c - Kaiiso

原帖发布者 - 提出问题的人。 - Ivan86

哦，抱歉哈哈，我觉得他可能不知道这是可能的，或者他只是没有考虑就给了一个基本的例子。 - Kaiiso

我认为他肯定知道这是可能的，但希望找到一个干净的解决方案，而不必添加可能不必要的 JavaScript 依赖项。 - Ivan86

海报还在问如何操作。这个问题让我感觉他们可能不知道如何获取限制尺寸并计算目标尺寸。 - Andy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- kornieff · Accepted Answer

使用填充技巧获取元素比例时，如果带有边框，则无法使用--边框会使其变成正方形。以下是两种情况，一种是没有最大宽度容器，另一种是有最大宽度容器的情况。

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>