css - 根据父 div 的宽度定义元素的高度

标签 css twitter-bootstrap twitter-bootstrap-3

<分区>

如何根据父 div 的宽度设置元素的高度?

如果我这样做

height: <some_ratio>vw

我得到的高度等于视口(viewport)宽度的 some_ratio。 我想要父 div 宽度的 some_ratio。 这可能吗?

(我需要这个来在 bootstrap cols 中生成正方形元素。因此这些元素的高度必须等于 col 的宽度)

最佳答案

如果你想要一个纯 CSS 的方式,你可以将 child 的高度设置为 0,然后使用 padding-bottom 来设置一个百分比 :)(填充基于宽度,甚至是顶部/底部填充)

.parent{
    height: 100px;
    width: 300px;
    background: red;
}
.child{
    background: blue;
    width: 50px;
    height: 0;
    padding-bottom: 25%;
}
<div class="parent">
<div class="child">
</div>
</div>

关于css - 根据父 div 的宽度定义元素的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47730173/

上一篇:css - 如何在 Ghost 的代码部分编辑字体大小

下一篇:javascript - 使用 mouseenter 水平翻译,mouseleave 功能不起作用

相关文章:

html - 像整个链接一样在 <a> 和 <span> 下划线

javascript - CSS 变换何时真正设置?

css - 跨平台(Windows 和 OSX)的风格差异

jquery - 使用 CSS 修改 SVG 作为背景图像

javascript - Bootstrap 模式对话框从 javascript 设置属性

javascript - Bootstrap 下拉菜单在与数据目标一起使用时会切换

html - 展开时无法在 IE11 中更改下拉边框颜色

javascript - 将 json 放入模态

html - 将图像纵横比保持在列 div 内,同时保持相同的列高

javascript - Type=submit 不能以 bootstrap 的形式工作?