CSS：調整圖像，就好像圖像是從流動

Question

我試圖使用CSS尺寸的圖像，以父div的高度（即高度：自動）去除，以div的高度，如果圖像是從流去除。這裏是標記：

<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> 

看不見的人力資源是在那裏，讓父div伸展下來覆蓋浮動子div。如果有更好的處理方法，我也想知道。

這裏的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; 
} 

感謝您的幫助！

--Nick

Answer 1

聽起來好像你不知道你想要的形象，以填補區域的高度。如果這是正確的，則調整圖像大小的一種方法是使用javascript。你必須首先得到父元素的高度和寬度，然後設置圖像的高度和寬度分別。

您也將有絕對定位的形象和父元素相對定位。

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

如果您使用jQuery，可以像這樣調整圖像大小。

$(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() 
    }); 

});