title: Fluid icon relative to parent
body: <p>In my <a href="http://jsfiddle.net/TgW2D/5/" rel="nofollow">fiddle</a>, There are two buttons with icons. Currently I am using fixed <code>width</code> and <code>height</code>for these icons, how can I use <code>percentage</code> relative to the parent size of these icons? Example: 80%?</p>
  
  <p>Fixed width and height of my icons:</p>
  
  <pre><code>    .gc_footer_nix_icon_img, .gc_footer_use_icon_img {
          width: 25px;
          height: 25px;
      }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class='gc_container'&gt;
      &lt;div class='gc_gift'&gt;
          &lt;div class='gc_gift_inner'&gt;
              &lt;div class='gc_amount'&gt;$100 Amount&lt;/div&gt;
              &lt;div class='gc_subtitle'&gt;Test subtitle&lt;/div&gt;
              &lt;div class='gc_hr'&gt;&lt;/div&gt;
              &lt;div class='gc_terms'&gt;Test terms&lt;/div&gt;
              &lt;div class='gc_footer'&gt;
                  &lt;div class='gc_footer_expiry'&gt;Test Date&lt;/div&gt;
                  &lt;div class='gc_footer_use_nix'&gt;
                      &lt;div class='gc_footer_use'&gt;
                          &lt;div class='gc_footer_button_wrapper'&gt;
                              &lt;div class='gc_footer_use_txt'&gt;Use&lt;/div&gt;
                              &lt;div class='gc_footer_use_icon'&gt;
                                  &lt;img class='gc_footer_use_icon_img' src='https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg' /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class='gc_footer_nix'&gt;
                          &lt;div class='gc_footer_button_wrapper'&gt;
                              &lt;div class='gc_footer_nix_txt'&gt;Nix&lt;/div&gt;
                              &lt;div class='gc_footer_nix_icon'&gt;
                                  &lt;img class='gc_footer_nix_icon_img' src='https://imagizer.imageshack.us/v2/849x565q90/833/uua2.jpg' /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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;;
  
  }
  </code></pre>