我可以将 div 高度编程为当前宽度的一定百分比吗？ [复制]

Posted 2023-03-05

【中文标题】我可以将 div 高度编程为当前宽度的一定百分比吗？ [复制]

【英文标题】：Can I program the div height to be a certain percentage of it's current width? [duplicate]

【发布时间】：2015-02-11 12:53:03

【问题描述】：

是否可以给 div 一个宽度，它是窗口的百分比，高度是它当前宽度的某个百分比？因此 div 会调整大小，但在调整浏览器窗口大小时会保持相同的纵横比。

谢谢 咻

【问题讨论】：

@bart 这些答案是否满足您的需求？包括可能的重复项？如果是这样，请表现出一些爱。

对不起，我还不知道！我仍在尝试.. :p 我当然不是这方面的专业人士，我在空闲时间做这件事。目前，我正在为我的一个熟人建立一个小型网站。但是我需要一些时间来弄清楚一切如何运作以及如何应用建议的解决方案。但是当我让它工作时，我肯定会标记对我帮助最大的答案。它们看起来都很有帮助。

继续加油！我也是从业余爱好开始的，在获得生物学位时，现在我是全职的。

哈哈，谢谢，我今年 18 岁，目前正在攻读汽车工程师学士学位，所以这与编程和生物学一样不同。从来没有受过这方面的教育，但我有点喜欢它.. :)

【参考方案1】：

padding 技巧已经得到解答，但我使用另一种方法，包含两个嵌套的 div。

父级，我设置宽度。孩子一号，我使用height 值作为容器单元vw - （表示视口宽度）。

It works well, see here（调整视口大小）

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

CSS：

div 
    width: 100%;


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

【讨论】：

喜欢它！有趣的方法。

尽管您不需要嵌套 div 以使其工作。 div width: 100%; height: 10vw; background: silver; 会产生相同的结果，不是吗？我仍在升级，特别是因为视口单元很棒，并且得到更好的支持。

jsfiddle.net/k3855hLc/4

@Todd - 仅当您希望 width 成为 100% 时才会这样做。因为vw 是相对于容器视口的...在这种情况下，就是窗口。

jsfiddle.net/k3855hLc/7 我不知道情况如何。我错过了什么吗？ @LcSalazar

【参考方案2】：

我用这个

DEMO 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%

DEMO 2

如果你不喜欢像我这样，你可以做一个 mixin：

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

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

【参考方案3】：

如果您以百分比设置元素的顶部和底部填充，它将相对于元素的宽度。

【讨论】：

如果您要忽略 cmets 中与农场代表的两个重复链接，您至少可以为未来的访问者提供一些工作示例代码。

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

你能链接到投票结束吗？

我不知道。不过，我投票关闭。我们会看看情况如何。我也赞成你的回答哈哈。

你应该链接到我的答案，然后？ :P 我知道人们对重复的事情很感兴趣。问题是这样的：每个问题都有很多答案，但并不是每个问题都能得到所有答案——更不用说最好的答案了。通过查看“相同”问题的各种答案，我学到了很多东西。

【参考方案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>

【参考方案5】：

是的，使用 jquery 可以获得屏幕宽度和高度，然后您可以定位该 div 并设置高度和宽度

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

setting width of div jquery

【讨论】：

OP 没有提到 jquery，@Tobi