高度格和圖像

Question

我有一個div高度的問題。我在左邊的div中有一個圖像「image_view」，這個div的高度是基於圖像的dinamically。 在右側，我有一個div與一些信息。該div必須具有與image_view div相同的高度。我該怎麼做？ 這是我現在的代碼。

<div id="image_view"> 
    <img src="<?php echo base_url().'upload/images/'.$nome_immagine; ?>" /> 
</div> 
<div id="info_image" style="height:<?php echo $altezza.'px'; ?>"> 
    content of this div 
</div> 

感謝

Answer 1

你可以這樣做：

$('#info_image').css("height", $("#image_view").height()); 

Answer 2

或者你可以用getimagesize()獲取圖像高度，並將其分配給info_image元素。

<?php 
$imagePath = base_url().'upload/images/'.$nome_immagine; 
$size = getimagesize($imagePath); 
?> 

<div id="image_view"> 
    <img src="<?php echo $imagePath; ?>" /> 
</div> 
<div id="info_image" style="height:<?php echo $size[1].'px'; ?>"> 
    content of this div 
</div> 

Answer 3

解決方案沒有JavaScript

你可以調整你的HTML，迫使<div>的高度相同的圖像：

HTML

<div id="image-info-container"> 
    <div id="image-info"> 
     <div id="image"> 
      <img src="" /> 
     </div> 
     <div id="info"> 
      info here 
     </div> 
     <div style="clear:both;"></div> 
    </div> 
</div>​ 

CSS

#image-info { 
    width: 600px; 
    background:#eeeeee; 
} 

#info { 
    float: left; 
    width: 200px; 
    background: #eee; 
} 

#image { 
    float: left; 
    background: #f0e; 
    width: 400px; 
} 

#image img { 
    height: 500px; 
} 
​ 

這將迫使#image-info-area變成與圖像相同的高度，並且無論如何你都可以設計出<div>的樣式。

Here's a fiddle

Answer 4

您可以使用jQuery的height()功能：

$('#info_image').height($('#image_view').height()); 

jsFiddle here