Question

我正在尝试获得具有图像内部的div的高度。图像实际高度很大，但我想将高度应用于与div的高度相同的图像。

我在找到div的高度时遇到问题。它给出了错误的高度。实际div高度为189，但给出159。

我尝试过height（），outerHeight（），innerHeight（）。

<div class="cd-timeline-content">               
    <div class="">
        <div class="timeline-content-image">
            <img src="test-image.png" alt="image">
        </div>
        <div class="head">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, 
.
        </div>
    </div>              
    <a href="#0" class="cd-read-more">Read more</a>
    <div class="read-more-content">
       <p class="sub_text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, 
        optio, dolorum provident rerum aut hic quasi placeat iure tempora 
        laudantium ipsa ad debitis unde? Iste voluptatibus minus veritat 
        ut.
        </p>                
    </div>  
</div> <!-- cd-timeline-content -->

的CSS

.cd-timeline-content {
    margin-left: 0;
    padding: 0 20px 0 20px;
    width: 40%;
 }
.timeline-content-image{
    float: right;
    margin-left:10px;
    margin-right:0px;
}

Jquery的

jQuery('.cd-timeline-content').each(function(){
    var contentHeight = jQuery(this).height();
    console.log(contentHeight);
    jQuery(this).find('img').attr({height: contentHeight});
});

Answer 1

编辑问题后的新答案：

前段时间我遇到过类似的问题，但仅限于Safari。我用

解决了这个问题

$(window).load(function(){
   var myheight = $("#x").height();  
});

...获取相关元素的高度（＆＃34;＃x＆＃34;在我的情况下）。也许这有帮助...

Answer 2

HTML和CSS

{{1}}

Answer 3

您可以使用css代码使用自适应图像。看看

<style>
img{ max-with:100%; height:auto; }
</style>


<div class="cd-timeline-content">               
    <div class="">
        <div class="timeline-content-image">
            <img src="test-image.png" alt="image">
        </div>
        <div class="head">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, 
.
        </div>
    </div>              
    <a href="#0" class="cd-read-more">Read more</a>
    <div class="read-more-content">
       <p class="sub_text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, 
        optio, dolorum provident rerum aut hic quasi placeat iure tempora 
        laudantium ipsa ad debitis unde? Iste voluptatibus minus veritat 
        ut.
        </p>                
    </div>  
</div>

如有任何问题，请通知我。

将div内容高度设置为同一div内的图像

3 个答案: