Question

I am trying to use CSS to size an image to the height of parent div (which is height: auto) as if the image were removed from the flow. Here’s the markup:

 <div class="item">
        <asp:UpdatePanel ID="upTest" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
            <ContentTemplate>
                <div class="title">Test</div>
                <div class="content">
                    <asp:DropDownList ID="ddlTest" runat="server">
                    </asp:DropDownList>
                </div>
                <div class="confirmation">
                    <img alt="" src="../Graphics/Check-icon.png" />
                </div>
            </ContentTemplate>
        </asp:UpdatePanel>
        <hr />
    </div>

The invisible HR is in there so that the parent div stretches down to cover the floating child divs. If there is a better way of handling this, I’d like to know about that, too.

Here’s the CSS:

.item
{   
    -moz-border-radius: 0.5em 0 0 0.5em;
    -webkit-border-radius: 0.5em 0 0 0.5em;
    -khtml-border-radius: 0.5em 0 0 0.5em;
    border-radius: 0.5em 0 0 0.5em;

    border-left: 1px solid black;
    border-bottom: 1px solid black;

    margin-left: 0.5em;
}

.item .title
{
    float: left;
    width: 15%;
}

.item .content
{
    float: left;
    width: 80%;
}

.item .confirmation
{
    float:left;
    width: 5%;
}

.item .confirmation img
{
    height: 1.3em;
}

.item hr
{
    clear: both;
    visibility: hidden;
    padding: 0;
    margin: 0;
}

Thanks for the help!

–Nick

Answer 1

It sounds like you don’t know the height of the area you want the image to fill. If this is correct one way to size the image would be to use javascript. You would first have to get the height and width of the parent element and then set the image height and width respectively.

You will also have to absolutely position the image and relatively position the parent element.

.item { position:relative; }
.item .confirmation img { position:absolute; }

If you use jQuery you could resize the image like this.

$(function() {

    /* Get the element and parent element and cache the selectors */
    var $img = $('.confirmation').find('img'),
        $parent = $img.parents('.item');

    /* 
       Set the dimensions of the image to match the parent
       If your parent element has margin and padding 
       use outerHeight() & outerWidth()
    */
    $img.css({
        height: $parent.height(),
        left: 0,
        top: 0,
        width: $parent.width()
    });

});