CODEWITHSUNDEEP
css
Student
Student

Reputation: 28345

How to set the div to use the content image height?

In this Wordpress theme, I'll use images with different heights. So, I'm trying (with Firefox's "inspect element", to test) modify the css to make the div's height grow with the image height.

By inspecting the image element, we see the image inside a <a> that is inside 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>

But if I set this 3 elements to height:auto, the <div> will have a computed value of 0px. Why? Something to do with the <a> element? (in other themes looks like there's no <a> element to hold images)

The image I'm using to teste:

enter image description here

I trying to see this image with it's full height.

Upvotes: 0

Views: 117

Answers (2)

TreeTree
TreeTree

Reputation: 3230

The <div> gets a height of zero because its only child is the <a>, which is position:absolute. You set the <div> to height:auto which makes it only as tall as it requires to contain its children, but its only child is absolute and those guys' height mean nothing to their parents.

If you want the <div> to have the height of that <a> just remove the position from the anchor, based on the theme it's not providing any benefit whatsoever.

Upvotes: 1

this_guy
this_guy

Reputation: 604

Couldn't you just set the height to 100%?

Upvotes: 0

Related Questions