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

Question

i am trying to get the height of div which having image inside that image. Image actual height is large but i want to apply height to image same as height of div.

I am facing issue while finding height of div. it's giving wrong height. Actual div height is 189 but its giving 159.

I have tried with 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

NEW ANSWER after edit of question:

I had a similar problem some time ago, but only in Safari. I solved it by using

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

...to get the height of the element in question ("#x" in my case). Maybe that helps...

Answer 2

HTML and CSS

<div class="DivContains">
   <img src="http://image.jpg">
</div>

.DivContains{
     width: 50px;
     height: 50px;
}
img{
     height: 100%;
     width: 100%;
}

Answer 3

you can use responsive image using the css code . Have a look

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

Please let me know in case any issue.