このWordPress テーマでは、高さの異なる画像を使用します。だから、(Firefoxの「検査要素」を使ってテストするために)cssを変更して、divの高さが画像の高さで大きくなるようにしようとしています。
image 要素を調べると、 a 内にある a 内の画像が表示され<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>
(他のテーマでは、画像を保持する要素がないように見えます)
テストに使用している画像:
この画像を全高で見ようとしています。