我能否编程使div高度成为其当前宽度的某个百分比？

Question

是否可以使

的宽度成为窗口宽度的百分比，并且其高度是当前宽度的某个百分比？因此，当您调整浏览器窗口大小时，

会重新调整大小，但保持相同的长宽比。

谢谢

Ciao

- Bart

---

@bart，这些答案中有没有符合您需求的？包括可能的重复问题？如果是，请表示一下支持。 - Todd

抱歉，我还不知道！我还在努力中.. :p 我肯定不是专业人士，我只是在空闲时间做这个。目前，我正在为一个熟人建立一个小网站。但我需要一些时间来弄清楚一切的工作原理以及如何应用建议的解决方案。但是当我搞定了，我肯定会标记帮助我最多的答案。它们都看起来非常有帮助。 - Bart

继续保持！我也是从兴趣爱好开始接触编程的，当时我正在攻读生物学学位，现在我已经全职从事编程工作了。 - Todd

哈哈，谢谢。我今年18岁，目前正在攻读汽车工程学士学位，所以这与编程一样不同，就像生物学一样。我从未接受过任何相关教育，但我有点喜欢它.. :) - Bart

Answer 1

有一种名为“padding技巧”的方法，已经得到回答，但我使用另一种方法，涉及两个嵌套的div。

父级div中，我设置了宽度。子级div中，我将高度值作为容器单位vw - （表示视口宽度）。

它很好用，可以点击这里查看（调整视口大小）

<div>
    <div></div>
</div>

CSS：

div {
    width: 100%;
}

div > div {
    background: silver;
    height: 10vw;
}

- LcSalazar

---

很喜欢！有趣的方法。 - Todd

http://jsfiddle.net/k3855hLc/4/ - Todd

@Todd - 只有当您希望width为100％时，它才会生效。因为vw相对于容器视口而言...在这种情况下，是窗口。 - LcSalazar

http://jsfiddle.net/k3855hLc/7/ 我没有看到那是这种情况。我错过了什么吗？@LcSalazar - Todd

是的，这仍然是一种有趣的技术，但除非你想要全宽度的东西，否则它不会保持纵横比。此时，它与例如width: 33.3%相比没有任何优势。 - Todd

Answer 2

我使用这个

演示1

.aspect-ratio {
    max-width: 100%;

}
.aspect-ratio:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: ({height-aspect} / {width-aspect} * 100)%; // for 3 x 4, for instance: 75%
}

演示 2

如果你像我一样喜欢简单，可以使用mixin：

.aspectRatio(@widthAspect, @heightAspect) {
    @aspect: @heightAspect/@widthAspect * 100;
    max-width: 100%;

    &:before {
        content: '';
        display: block;
        width: 100%;
        padding-bottom: ~"@{aspect}%";
    }
}

- Todd

Answer 3

如果你将一个元素的上下填充设置为百分比，它将相对于该元素的宽度进行计算。

- Bill Criswell

---

如果你要忽略评论中的两个重复链接来刷声望，那么你至少应该为未来的访问者提供一些可行的示例代码。 - AlienWebguy

我没有注意到评论。我应该在我的评论中提供你提供的链接吗？我应该投票关闭吗？ - Bill Criswell

你能提供一个关闭投票的链接吗？ - Todd

我也不知道。但是我投了一个关闭票。我们看看会怎样。哈哈，我还给你的答案点了个赞。 - Bill Criswell

你应该只是链接到我的答案，对吧？:P 我知道人们对重复问题会感到很困惑。事实是这样的：对于每个问题都有许多答案，但并不是每个问题都能得到所有答案，更别说最好的答案了。通过查看“相同”问题的各种答案，我学到了很多东西。 - Todd

Answer 4

当您在 height 中使用百分比时，它是相对于生成的盒子所在块的高度计算的。

如果您想根据其宽度计算，则可以使用例如 padding-top。

为了避免影响内容，请将其置于绝对定位的包装器中。

#wrapper {
  padding-top: 25%; /* ratio */
  border: 1px solid;
  position: relative;
}
#content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div id="wrapper">
  <div id="content">
    <p>Foo</p>
    <p>Bar</p>
    <p>Baz</p>
  </div>
</div>

- Oriol

Answer 5

是的，使用jQuery可以获取屏幕的宽度和高度，然后您可以针对该div设置高度和宽度。

http://api.jquery.com/width/

设置div宽度jquery

- Tobi Klostermair

---

OP没有提到jQuery，@Tobi - Todd