HTML / JavaScript / CSS / PHP代码将宽度％更新为像素高度[重复]答案

【问题标题】：HTML/JavaScript/CSS/PHP code to update width % to height in pixels [duplicate]HTML / JavaScript / CSS / PHP代码将宽度％更新为像素高度[重复]
【发布时间】：2015-10-04 04:45:17
【问题描述】：

如果不是全部，我不知道需要哪个，但这是我的问题。

我想在整个页面上制作 5 个 div 方块。显然，我会将每个宽度设为 20%，但如果我将高度更改为 20%，那么它将不是正方形。我需要一个命令来找出宽度是多少像素，然后将高度更改为该数字。我需要它来实时更新。这是我网站上的文章页面。

我也是 Javascript 和 PHP 的新手，但我很擅长 HTML 和 CSS

如果你有更简单的方法，请告诉:)

感谢您帮助初级程序员！

【问题讨论】：

标签： javascript php jquery html css

【解决方案1】：

width = jQuery('#container div').width();
jQuery('div').css('height', width);

https://jsfiddle.net/b8aw4jbv/1/

【讨论】：

不完全正确。您将所有 div 的高度设置为第一个 div 的高度。
您不应该为此使用 javascript。另外它不处理窗口大小调整。

【解决方案2】：

只能通过 css 使用 padding-bottom:

.square{
  width:20%;
  padding-bottom:20%;
  background-color:green;
  display:inline-block;
  position:relative;
}
.square .content{
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
}

<div class="square">
  <div class="content">
    Lorem ipsum
  </div>
</div>

它响应迅速，无需运行 js 或加载 jQuery

编辑：padding 使用百分比值从父级的 width 计算其值，因此padding-bottom 占父级宽度的 20%。 .content 需要 position:absolute 并被拉伸到整个 div 以忽略此填充并在适当的位置显示其中的内容

【讨论】：

应该添加解释为什么它工作，这是因为填充和边距是根据元素宽度计算的，绝对定位允许在不知道它的大小的情况下填充整个块。 :)

【解决方案3】：

您可以使用 javascript jquery 来做到这一点，例如：

$('div').each({
    $(this).height($(this).width());
});

这段代码是什么意思： - 它遍历页面中的 div - 它将 div 的高度设置为 div 的宽度（以像素为单位）

【讨论】：

我不知道jquery，但我愿意学习如何实现它。您能否将我链接到有价值的教程或 pfd 的？当我了解它如何正常工作时，我将复制该代码并实施它:) 但是谢谢
好吧，您在问题中添加了标签 jquery - 所以您应该了解基础知识。使用jquery.com 学习基础知识！

【解决方案4】：

所以，基本上，你想要做的就是让 div 的纵横比为 1:1。

只用 CSS 就可以做到这一点。这是如何做： http://codepen.io/DisColow/pen/pJKZOb

我只是将我的所有方块都设置为有宽度并且向左浮动。然后，我为每个具有以下 CSS 规则的正方形添加一个 :before 伪元素：

padding-bottom: 100%;

当您为 padding-bottom 指定百分比时，它是相对于父容器宽度的。因此，我简单地告诉我的正方形要宽高。

希望对您有所帮助。

然后您可以在方形内部 div 中写入您的内容。

【讨论】：

【解决方案5】：

$( "div" ).each(function() {
    var divWidth = $(this).width();  // Get Width
    $(this).height(divWidth);        // Set height
});

【讨论】：

虽然你不应该使用 javascript 来做这样的事情（因为你可以用纯 css 来做），你应该把你所有的代码包装在一个 jQuery(window).resize(/* 你的代码在这里*/);因为用户会改变窗口大小。