相對於父母的流體圖標

Question

在我的fiddle中，有兩個帶有圖標的按鈕。目前我正在使用固定的width和height這些圖標，我如何才能使用percentage相對於這些圖標的父級大小？例如：80％？

固定的寬度和高度，我的圖標：

.gc_footer_nix_icon_img, .gc_footer_use_icon_img { 
     width: 25px; 
     height: 25px; 
    } 

HTML：

<div class='gc_container'> 
    <div class='gc_gift'> 
     <div class='gc_gift_inner'> 
      <div class='gc_amount'>$100 Amount</div> 
      <div class='gc_subtitle'>Test subtitle</div> 
      <div class='gc_hr'></div> 
      <div class='gc_terms'>Test terms</div> 
      <div class='gc_footer'> 
       <div class='gc_footer_expiry'>Test Date</div> 
       <div class='gc_footer_use_nix'> 
        <div class='gc_footer_use'> 
         <div class='gc_footer_button_wrapper'> 
          <div class='gc_footer_use_txt'>Use</div> 
          <div class='gc_footer_use_icon'> 
           <img class='gc_footer_use_icon_img' src='https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg' /> 
          </div> 
         </div> 
        </div> 
        <div class='gc_footer_nix'> 
         <div class='gc_footer_button_wrapper'> 
          <div class='gc_footer_nix_txt'>Nix</div> 
          <div class='gc_footer_nix_icon'> 
           <img class='gc_footer_nix_icon_img' src='https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg' /> 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

body { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.gc_gift { 
    margin-top:1.5%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:1.5%; 
    height: auto; 
    width: 97%; 
    position:relative; 
    overflow: scroll; 
    webkit-overflow-scrolling: touch; 
    border:1px solid #D1D1D1; 
} 
.gc_gift_inner { 
    font-size:1em; 
    text-align: left; 
    background-color: #ffffff; 
    border:0px solid #D1D1D1; 
    display:table; 
    margin-top:2.5%; 
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:2.5%; 
    height: auto; 
    width: 95%; 
    position:relative; 
    overflow: scroll; 
    webkit-overflow-scrolling: touch; 
} 
.gc_amount { 
    color: red; 
    font-size:2em; 
} 
.gc_subtitle { 
    font-weight: bold; 
    font-size: 1em; 
    color: #707070; 
} 
.gc_hr { 
    width: 100%; 
    position: relative; 
    margin: auto; 
    border-color: #D1D1D1; 
    border-style: solid; 
    border-width: 1px 0 0 0; 
} 
.gc_terms { 
    font-size: 0.8em; 
    color: #707070; 
} 
.gc_footer { 
    width: 95%; 
    display: table; 
    position: relative; 
} 
.gc_footer_expiry { 
    display: table-cell; 
    vertical-align: bottom; 
    font-size: 0.8em; 
    font-weight: bold; 
    width: 40%; 
    color: #707070; 
    border: 0px solid yellow; 
} 
.gc_footer_use_nix { 
    display: table-cell; 
    vertical-align: middle; 
    width: 60%; 
    border:0px solid green; 
    margin: auto; 
    text-align: right; 
} 
.gc_footer_use { 
    display: inline-block; 
    vertical-align: middle; 
    background-color: #3F6EB6; 
    border-radius: 1px; 
    padding: 2%; 
    position: relative; 
    border:0px solid red; 
    margin-right: 5%; 
} 
.gc_footer_use_txt { 
    text-align: right; 
    display: table-cell; 
    vertical-align: middle; 
    color: white; 
    font-size: 1em; 
    font-weight: bold; 
} 
.gc_footer_use_icon { 
    text-align: right; 
    display: table-cell; 
    vertical-align: middle; 
} 
.gc_footer_nix { 
    display: inline-block; 
    vertical-align: middle; 
    background-color: #D61920; 
    border-radius: 1px; 
    color: white; 
    font-size: 1em; 
    border: 0x solid green; 
    padding: 2%; 
    margin-right: 5%; 
} 
.gc_footer_nix_txt { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    border: 0px solid blue; 
    width: 50%; 
    font-weight: bold; 
} 
.gc_footer_nix_icon { 
    text-align: center; 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    border: 0px solid yellow; 
    width: 50%; 
} 
.gc_footer_button_wrapper { 
    display: table; 
    width: 100%; 
    position: relative; 
    border: 0px solid blue; 
} 
.gc_container { 
    background-color:#ffffff; 
    height: auto; 
    width: 90%; 
    display:table; 
    margin-top:3%; 
    margin-bottom:3%; 
    margin-left:auto; 
    margin-right:auto; 
    position:relative; 
    border:1px solid #D1D1D1; 
} 
.gc_amount, .gc_subtitle, .gc_terms, .gc_footer { 
    border: 0px solid green; 
    display:table; 
    width:100%; 
    padding-top:0.3em; 
    padding-bottom:0.3em; 
} 
.gc_footer_nix_icon_img, .gc_footer_use_icon_img { 
    width: 25px; 
    height: 25px;; 

} 

Answer 1

您需要設置寬度gc_footer_nix和gc_footer_use，然後你將能夠設置圖像的寬度。小提琴：http://jsfiddle.net/TgW2D/7/