如何設置div來使用內容圖像的高度？

Question

在this Wordpress theme中，我將使用不同高度的圖像。所以，我試圖（用Firefox的「檢查元素」來測試）修改CSS以使div的高度隨着圖像高度而增加。

通過檢查圖像元素，我們看到了一個<a>這是一個<div>內內的圖像：

<article id="post-81" class="post-81 post type-post status-publish format-image hentry category-artwork category-photos category-writing tag-panache"> 

    <header class="entry-header"> … </header> 
    <!-- 

    .entry-header 

    --> 
    <div class="entry-thumbnail"> 
     <a rel="bookmark" href="http://fontfoliodemo.wordpress.com/2011/07/07/jellyfish/"> 
      <span class="entry-format"> … </span> 
      <img class="attachment-featured-home-small wp-post-image" width="282" height="211" title="Jellyfish" alt="Jellyfish" src="http://fontfoliodemo.files.wordpress.com/2011/07/img_0429.jpg?w=282&h=211&crop=1"></img> 
     </a> 
    </div> 

</article> 

但如果我設置3個元素height:auto，該<div>將有0px計算值。爲什麼？與<a>元素有關？ （在其他主題看起來像沒有<a>元件可以保持圖像）

圖像我使用阿泰斯特：

我想看看這個形象與它的最大高度。

Answer 1

<div>的高度爲零，因爲它的唯一子女是<a>，即position:absolute。你將<div>設置爲height:auto，這使得它只能容納它的孩子，但它的唯一孩子是絕對的，那些傢伙的高度對他們的父母沒有任何意義。

如果你想<div>到有<a>的高度只是刪除錨點的位置，基於主題的它不以任何形式提供任何好處。

Answer 2

難道你不能只將高度設置爲100％？