javascript - 从另一个获取 css 高度值

Question

所以目前我有一个包含图像的 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(){

Answer 1

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

所以用 jQuery 来做:

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

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