根据其父级的高度设置宽度

Question

全球问题：

我想根据父级的高度设置元素的宽度，我知道您可以使用

padding-top

根据父级的宽度设置高度，也许有人知道我的情况的技巧。

解决全局问题的一个可能的解决方案（技巧）是将height: 100%

设置为元素，然后设置

rotate(90deg)

，这将模拟它的宽度等于父级的高度，但这不适合我的情况。

具体问题（也许可以做一些解决方法）：

简化问题：

我想要一个动态方形元素，其宽度和高度 = x，其中 x = 父级的高度。

---

完整问题：

我想要这样的东西

其中 x = d / sqrt(2)（毕达哥拉斯定理）

所以你可以看到“d”是父母的身高，我尝试使用

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content: '';
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);/*this worked because height depends on the parent's height (div.blue)*/
    width: 70.9px; /* calc(100% / 1.41) here is my problem  because width depends on the parent's width and I don't know how to make it depends on the parent's height
}

<div class="blue"></div>

注意，我设置了一个固定的

width

，因为我不知道如何使其取决于

height的

div.blue

这里有一个 jsfiddle 示例来解决一些问题。

如果有人能帮助我，我将不胜感激。

仅CSS

Answer 1

解决您的具体但不完整的问题：

我想要一个动态方形元素，其宽度和高度 = x，其中 x = 父级的高度。

动态方块可以是图像，父元素可以是 div。

<div class="parent-container">
    <img class="image" src="{{imageUrl}}" />
</div>

现在，对于此设置，您为父级提供所需的高度，并告诉元素（图像）接受全部高度。像这样：

.parent-container {
    height: 400px;   
}

.image {
    height: 100%;
}

这样，宽度就不再是你关心的了。

---

编辑

将 CSS 修改为：

.parent-container {
    height: 400px;
    overflow: hidden;
}

.image {
    height: 70.92%;
    position: relative;
    transform: translate(-50%, 0)rotate(-45deg);
    top: 14.4%;
}

应该解决“完整问题”。

请注意，高度和顶部值是粗略计算的，应重新进行。

启动小提琴：

https://jsfiddle.net/0pok1bf0/

Answer 2

为了好玩，这里有一个有趣的尝试，它利用了垂直百分比（填充），如下所述：

http://www.impressivewebs.com/vertical-percentages-css/

.d1 {
	margin-left: 50px;
	width: 50%;
	background-color: #CCCCFF;
	border: solid black 1px;
}

.d2 {
	width: 25%;
	background-color: #FF6666;
	border: solid black 1px;
	padding-top: 25%;
	margin: 5%;
	margin-left: -13%;
	transform: rotateZ(45deg);
}

<div class="d1">
	<div class="d2"></div>
</div>

查看全页模式并调整大小...一切都可以很好地缩放，几乎：P

Answer 3

您可以尝试使用伪元素。但是，如果不是高度/宽度，您仍然需要设置边框宽度。

演示：

http://jsfiddle.net/lotusgodkk/GCu2D/752/

CSS：

.box {
    position:relative;
    background-color:#7092BE;
    width:500px;/*sample*/
    height:150px;/*sample*/
    margin:0 auto;
}
.box:before {
    position: absolute;
    content:"";
    right: 100%;
    border-style: solid;
    border-color: transparent #880015 transparent transparent;
    top: 0;
    bottom: 0;
    border-width:75px;
}
.box:after {
    position: absolute;
    content:"";
    left: 0;
    border-style: solid;
    border-color: transparent transparent transparent #880015;
    top: 0;
    bottom: 0;
    border-width:75px;
}

HTML：

<div class="box"></div>

Answer 4

我针对您的问题提出了两种实用的实现方法。 一种选择需要一个额外的包装纸。另一个需要两个。

这两个选项都允许您配置高度和宽度，尽管方式不同。

对于您的特定用例，选项 1 是最佳方法。

选项1

此选项仅需要一个额外的包装器

div

。您定义矩形的 

height

 的值和 

width - height

 的值（定义为填充）。正方形的宽度和高度会自动调整。

---

小提琴：

http://jsfiddle.net/w9wgb72e/9/

代码：

.bluecontainer {
    width: 100px; /* set height of rectangle */
    margin: 8px auto;
    padding-right: 100px; /* this value equals height - width of the rectangle */
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100%;
    margin-left: -49.6%;
    position: relative;
    padding-bottom: 100%;
}

.ratiocontainer:before {
    content: '';
    background: firebrick;
    padding: 35.4%;
    margin: 14.5%;
    float: left;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="bluecontainer">
    <div class="ratiocontainer">
    </div>
</div>

---

选项2

此选项需要两个额外的包装器

div

。您定义正方形的 

height

 和 

width

 以及矩形的 

width

 的值。矩形的高度会自动调整，以允许矩形环绕正方形。

小提琴：

http://jsfiddle.net/w9wgb72e/10/

代码：

.bluecontainer {
    width: 200px; /* set width of rectangle */
    margin: 8px auto;
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100px; /* set width & height of red square */
}

.stretchy-square {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    margin-left: -50%;
}

.stretchy-square:before {
    content: '';
    background: firebrick;
    margin: 15%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="bluecontainer">
    <div class="ratiocontainer">
        <div class="stretchy-square"></div>
    </div>
</div>

Answer 5

虽然我知道这个问题很老了，但如果将来有人读到这个答案，目前有一种方法可以用

aspect-ratio

:

<div class="blue"></div>

.blue {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #1AA9C8;
  margin: 25px auto;
}

.blue::before {
  content: '';
  position: absolute;
  left: 0%;
  top: 50%;
  height: calc(100% / 1.41);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: firebrick;
}

aspect-ratio

 指定 

height

 和 

width

 之间的固定纵横比。在这种情况下，当 

aspect-ratio

 为 

1 / 1

 时，默认设置为 

width

 的 

auto

 现在将具有与 

height

 相同的测量值。