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？

Answer 2

因为要求在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;
}

其他技巧是here

<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;
}

由于我们不知道列的高度，我们无法设置固定的高度在他们的父母。同时设置高度：100％或类似的东西列不起作用：我们指望它们传播到最大高度，从而使他们的父母更高。

在你的情况下

.InnerBanner{
   display: table-row;
}

.InnerBanner img{
   display: table-cell;
}

.InnerBannerlayout {
   display: table;
}

使用类InnerBannerlayout .

保留额外的布局父div

从另一个获取css高度值

2 个答案: