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

本文介绍了根据其父级的高度设置宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 限时删除！！ 全局问题： 我想根据父级的高度来设置元素的宽度，我知道你可以使用 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 这里有一个jsfiddle示例来解决一些问题。 如果有人能帮助我，我将不胜感激。 > 解决方案解决您的具体问题，但尚未完全解决问题： 我想要一个宽度和高度为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 thiswhere 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.blueHere 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.EditModifying 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/ 这篇关于根据其父级的高度设置宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 1403页，肝出来的..