Fluid icon relative to parent - css

Question

In my fiddle, There are two buttons with icons. Currently I am using fixed width and heightfor these icons, how can I use percentage relative to the parent size of these icons? Example: 80%?
Fixed width and height of my icons:
.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

You need to set width to gc_footer_nix and gc_footer_use , and then you'll be able to set the width on the images . Fiddle: http://jsfiddle.net/TgW2D/7/