2016-05-13 13 views
0

その画像の中に画像を持つ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}); 
}); 
+0

あなたはあなたの$( '。cd-timeline-block')はどこですか? Btw。なぜ高さ100%のようなCSSを使って画像の高さを設定しないのですか? –

+0

更新されたコードは私の間違いです – Kango

+0

もう一度、その画像に高さ:100%を使用してみませんか?そのためにjqueryは必要ありません。 –

答えて

0

NEW ANSWER質問の編集後:

私はいくつかの時間前に同様の問題を抱えていたが、唯一のSafariインチ

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

...問題の要素の高さ(私の場合は「#x」)を取得するために使用して解決しました。たぶん、あなたは、CSSコードを使用して対応する画像を使用することができます...

+0

@Kango私の新しい/ upadted答えにご注意ください – Johannes

0

HTMLとCSS

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

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

私はこれがurの問題を解決するかもしれないと思う – Muthu

0

を助けています。お見積もり

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

問題がある場合はお知らせください。

関連する問題