php - 高さの div と画像

Question

div の高さに問題があります。左のdiv「image_view」に画像があり、このdivの高さは動的に画像に基づいています。右側には、いくつかの情報を含む 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

jQueryのheight()関数を使用できます：

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

ここでjsFiddle

Answer 4

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>ます。

ここにフィドルがあります