CSS 高度 = 宽度？

Question

在 CSS 中执行此操作的简单方法是什么？

selector {
    width: 75%;
    height: width; 
}

我试过将高度设置为各种属性，但它们似乎没有达到我想要的效果。如何将一个值设置为另一个值？

Answer 1

嗯，如果你知道宽度 = 75%，你可以直接说高度 = 75%。

selector {
    width: 75%;
    height: 75%;
}

现在，如果您使用 PHP/Javascript 更改宽度，也只需更改高度。这对我来说似乎是最简单的方法，但我对制作网站还是很陌生。

这里也有回答：Whosebug。com/q/5445491/1004522

Answer 2

padding-top 百分比基于宽度，因此使用纯 CSS.

很容易计算

.wrapper {
  width: 50%;
  /* whatever width you want */
  display: inline-block;
  position: relative;
}
.wrapper:after {
  padding-top: 100%;
  /* 1:1 ratio, set from padding top being 100% */
  /* If you wanted one half as high, use 50% */
  
  display: block;
  content: '';
}
.main {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  
  /* fill parent */
  background-color: red;
  
  /* let's see it! */
  color: white;
}

<div class="wrapper">
  <div class="main">
    This is a sample 1:1 responsive DIV. 
  </div>
</div>

Answer 3

您目前无法在 css 中使用 CSS 变量的 firefox 除外

http://caniuse.com/#feat=css-variables

您可以使用 less 或 sass 等动态样式表语言来编写带有变量的 css。然后您可以将代码编译成纯 css.

更少的例子：

@size: 75%;
selector {
   width: @size;
   height: @size; 
}

Answer 4

我看到的最简单的方法是像这样使用 jquery：

<html>
 <head>
  <script>
   selector{
    width: 75%;
   }
  </scipt>
 </head>
 <body>
  <script type="text/javascript" src="/jquery.js"></script>

  <selector></selector>
  <script type="text/javascript">
   $("selector").css("height", $("selector").width());
  </script>
 </body>
</html>

据我了解，这应该使宽度和高度都达到 75%。

CSS 高度 = 宽度？

CSS Height = Width?

css

height

width