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

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/