將div內容高度設置爲同一div內的圖像

我想要獲取圖像內部具有圖像的div的高度。圖像的實際高度很大，但我想將高度應用於與div高度相同的圖像。將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}); 
});

來源

2016-05-13 Kango

你沒有包括整個代碼..你的$（'.cd-timeline-block'）在哪裏？順便說一句。爲什麼不通過像高度100％的CSS設置圖像高度？ –

更新的代碼，它是我的錯誤 – Kango

再次，爲什麼你不使用身高：100％的圖像？你不需要jquery。 –

問題的編輯後的新的答案：

我有一個類似的問題，前一段時間，但只有在Safari。我用

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

...讓有問題的元素（在我的情況「＃X」）的高度，解決它。也許這可以幫助...

來源

2016-05-13 12:04:27 Johannes

@Kango請注意我的新/回答 – Johannes

HTML和CSS

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

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

來源

2016-05-13 12:16:23 Muthu

我認爲這可能會解決你的問題 – Muthu

您可以使用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>

請讓我知道萬一有任何問題。

來源

2016-05-13 13:34:20

將div內容高度設置爲同一div內的圖像

回答

相關問題