Question

我有两个div，div.outer和div.inner：

<div class='outer'><div class='inner'>...content...</div</div>

div.outer可以独立调整宽度和高度。（不是用户他/她自己。）

此div中的div.inner宽度为其父div.outer的90％。此div必须具有height / width = 1.24的宽高比。所以高度必须是宽度的1.24倍。

换句话说，如何将div的高度设置为其父级宽度的112％？（1.2 * 90 ≈ 112）我正在寻找Less或标准CSS的解决方案。（如果需要，只有javascript / jQuery）。

这里是伪CSS：

.outer{
    width: resizable;
    height: resizable;
}

.inner{
    width: 90%;
    height: 1.12 * width_of(.outer);
}

提前致谢。

Answer 1

有一个技巧可以保持div的宽高比，我在这个西班牙博客中了解到：https://escss.blogspot.com/2013/08/aspect-ratios-css.html

您必须添加额外的div，但可能对您有用或是第一步获得解决方案：

＆＃13;

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.outer {
  width: 300px;
  border: solid 1px green;
}

.inner {
  border: solid 1px red;
  width: 90%;
  position: relative;
}

.inner:before {
  content: "";
  display: block;
  padding-top: 124%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

<div class="outer">
  <div class="inner">
    <div class="content">
      ... content ...
    </div>
  </div>
</div>

＆＃13;

CSS / LESS：如何设置div的高度等于其父级宽度的112％？

1 个答案: