根据其父级的高度设置宽度 [英] Setting the width depending on the height of its parent
问题描述
全局问题：
我想根据父级的高度来设置元素的宽度，我知道你可以使用 padding-top 根据父项的宽度设置高度，也许有人知道我的案例的一个诡计。
全局问题的一个可能的解决方案（诀窍）是将 height：100％设置为元素，然后 rotate 90deg），它将模拟它的宽度等于父级的高度，但不符合我的情况。
具体问题（也许可以解决一些问题）：
简化问题：
我想要一个宽度和高度= x的动态方形元素，其中x =父级的高度。
全部问题：
我想要这样的东西
其中x = d / sqrt（2）（毕达哥拉定理） / p>
，因此您可以看到d是父级的高度，我尝试使用
.blue {background：＃1AA9C8; width：200px; height：100px;位置：相对; margin：25px auto;}。blue：before {content：''; position：absolute; right：calc（100％ - 36px）; top：15px;背景：firebrick; -webkit-transform：rotate（45deg）; transform：rotate（45deg）; height：calc（100％/ 1.41）; / *这是因为高度取决于父级的高度（div.blue）* / width：70.9px; / * calc（100％/ 1.41）这里是我的问题，因为宽度取决于父的宽度，我不知道如何使它取决于父的高度}
< div class =blue>< / div>
注意，我设置了一个固定的 width t知道如何使它取决于 div.blue
$ b的
height $ b 如果有人能帮助我，我将不胜感激。
>
解决您的具体问题，但尚未完全解决问题：
< >
我想要一个宽度和高度为x的动态方形元素，其中x =父级的高度。
动态正方形可以是图像，父元素为div。
< div class =parent-container>
< img class =imagesrc ={{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/
The global problem:
I want to set the width of an element depending on the parent's height, I know that you can use padding-top to set the height depending on the parent's width, maybe someone knows a trick for my case.
A possible solution(trick) to The global problem would be setting height: 100% to the element and then rotate(90deg) that would simulate that it has the width equal to the parent's height but that don't fit my case.
The specific problem ( Maybe it's possible to do some workaround):
Simplified problem:
I want a dynamic square element that has width and height = x where x = parent's height.
Full problem:
I want something like this
where x = d / sqrt(2) (Pythagorean theorem)
so as you can see "d" is the parent's height, I try with
.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>
Note that I set a fixed width because I don't know how to make it depends on the height of div.blue
Here a jsfiddle example to do some workaround.
I would be grateful if someone could help me.
ONLY CSS
Addressing your specific, yet not full, problem:
I want a dynamic square element that has width and height = x where x = parent's height.
The dynamic square can be an image, and the parent a div.
<div class="parent-container">
<img class="image" src="{{imageUrl}}" />
</div>
Now for this setup you give the parent a desired height and tell the element (image) to take it all. Like this:
.parent-container {
height: 400px;
}
.image {
height: 100%;
}
This way, the width is not of your concern.
Edit
Modifying the CSS to this:
.parent-container {
height: 400px;
overflow: hidden;
}
.image {
height: 70.92%;
position: relative;
transform: translate(-50%, 0)rotate(-45deg);
top: 14.4%;
}
Should address the "Full Problem".
Please, mind that the height and top values are rough calculations and should be re-carried out.
The fiddle to boot: https://jsfiddle.net/0pok1bf0/
这篇关于根据其父级的高度设置宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
