HTML/JavaScript/CSS/PHP代码更新宽度%的高度在像素 - HTML/JavaScript/CSS/PHP code to update width % to height in pixels

HTML/JavaScript/CSS/PHP code to update width % to height in pixels

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

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

我也是Javascript的新手&PHP，但我对HTML相当在行;CSS

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

谢谢你帮助一个初级程序员!

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

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

可以通过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

EDIT: padding with percentage value从父元素宽度计算其值，因此padding-bottom取父元素宽度的20%。.content需要position:absolute并拉伸到整个div以忽略此填充并在适当的位置显示内容

您可以使用javascript jquery实现此操作，如:

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

这段代码是什么意思:-它循环在你的页面上的div-它将div的高度设置为div的宽度(以像素为单位)

基本上，你要做的就是让div的长宽比为1:1。

仅使用CSS就可以实现这一点。方法如下:http://codepen.io/DisColow/pen/pJKZOb

我只是简单地设置了我所有的正方形有一个宽度和浮动的左边。然后，我在每个方块的伪元素前添加一个:，它有以下CSS规则:

padding-bottom: 100%;

当你指定padding-bottom的百分比时，它是相对于父容器宽度的。因此，我简单地让我的正方形和它的宽度一样高。

希望有帮助。

你可以把你的内容写在方框内的div

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