css 宽是变动的,高怎么随着宽变动

之前也有过类似需求,一直都是用js来解决的,这次想通过css来解决,没想到还真找到了方法。

使用 :before 伪元素,能获取到实际高度

html

<div class="filebox col-md-2">
    <div class="file_icon txt_icon"></div>
    <div class="file_name">{{ data.filename }}</div>
</div>

css

.filebox .file_icon{
    display:inline-block;
    width: 100%;
    font-size: 12px;
    position: relative;
    vertical-align: middle;
}
.filebox .file_icon:before {
    content: "";
    display: inline-block;
    padding-bottom: 100%;
    width: .1px;
    vertical-align: middle;
}

方法实测很有用,还有其他方法,可以看原作者的博客还有其他方法

原博客地址:https://www.jianshu.com/p/83a84445d967