高度格和图像

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