Javascript 从另一个获取css高度值

所以现在我有一个div，里面有一个图像。css的设置也是如此

.InnerBanner{
    position:relative;
    text-align:center;
    margin-bottom:0px;
    margin-top:0px;
}

.InnerBanner img{
width:100%;
height:auto;
position: absolute;
top:0;
left:0;
}

由于外部容器不再将高度视为任何东西，我必须使用jquery在事实发生后加载高度，这是页面上的一个明显切换。我想知道是否有一种方法可以在css中单独完成这项工作，或者在jquery中加载页面之前完成这项工作。我已经用尽搜索引擎试图找到一种方法来做到这一点。很可能我的措辞不正确，但嘿，你赢了一些，你输了一些

用于加载的jquery如下所示

function Height(){
    var height = $(".BannerImage").height();
    var em = height/200;
    var newfont = em * 24;  
    $(".InnerBanner a").css("font-size", newfont);
    $(".InnerBanner").height($(".BannerImage").height());
}

该函数当前是这样调用的

$(document).ready(function(){

---

您需要在文档加载时调用jquery，以便它实际加载图像，从而获得图像的高度。文档准备就绪后，图像将不会加载，但会根据大小加载，99%的图像将不会完全加载。由于绝对位置，图像在其父对象中不占用任何空间，因此其行为类似于一个完全独立的元素

因此，要使用jQuery执行此操作：

$(window).on('load', function(){
    $('.InnerBanner').height( $('.InnerBanner img').height() );
});

---

另外，正如我从css中看到的。InnerBanner img将占据其父元素的整个宽度，那么为什么要在图像中添加position:absolute？

既然您要求在css中这样做

.InnerBanner{
    position:relative;
    text-align:center;
    margin-bottom:0px;
    margin-top:0px;
}

.InnerBanner img{
position: absolute;
top:0;
left:0;
}

<!--Same height and width for both class-->
.InnerBanner img,
.InnerBanner{
  width:100%;
  height:auto;
}

---

使用InnerBannerlayout类保留一个额外的布局父div。

您可以发布您的HTML，以便我们可以看到所有内容是如何组合在一起的吗？您不想使用jquery吗？让我知道如果我的答案有效，或者您面临任何问题。它们都不止一个，每个都有自己的z元素，可以淡入淡出。它们的宽度和宽度是否相同身高？这有帮助吗？

<div class="layout">
    <div class="columns-container">
        <div class="column"></div>
        <div class="column"></div>
    </div>
</div>





.layout {
    display: table;
}

.layout .columns-container {
    display: table-row;
}

.layout .columns-container .column {
    display: table-cell;
}

.InnerBanner{
   display: table-row;
}

.InnerBanner img{
   display: table-cell;
}

.InnerBannerlayout {
   display: table;
}