css - Fluid icon relative to parent -


In me, there are two buttons with the mouse. Currently I have fixed width for these symbols and I am using height , how can I use percent relative to the original size of these symbols? Example: 80%?

Fixed width and height of my mouse:

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

HTML:

  & 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 subtitles & lt; / Div & gt; & Lt; Div class = 'gc_hr' & gt; & Lt; / Div & gt; & Lt; Div class = 'gc_terms' & gt; Test word & 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; Knicks & 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;   

CSS:

  body {width: 100%; Height: 100%; Margin: 0; Padding: 0; } .gc_gift {margin-top: 1.5%; Margin-left: auto; Margin-Correct: Auto; Margin-bottom: 1.5%; Height: auto; Width: 97%; Status: Relative; Overflow: scroll; Webkit-overflow-scrolling: touch; Range: 1 px solid # d1d1d1; } .gc_gift_inner {font-size: 1em; Align text: left; Background color: #ffffff; Border: 0 px solid # d1d1d1; Display: Table; Margin Top: 2.5%; Margin-left: auto; Margin-Correct: Auto; Margin-bottom: 2.5%; Height: auto; Width: 95%; Status: 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%; Status: Relative; Margins: Auto; Border color: # D1D1D1; Border-style: solid; Border width: 1 p 0 0; } .gc_terms {font-size: 0.8em; Color: # 707070; } .gc_footer {width: 95%; Display: Table; Status: Relative; } .gc_footer_expiry {display: table-cell; Vertical-alignment: bottom; Font-size: 0.8 AM; font-weight: bold; Width: 40%; Color: # 707070; Border: 0 px solid yellow; } .gc_footer_use_nix {display: table-cell; Vertical-row: middle; Width: 60%; Border: 0 px solid green; Margins: Auto; Text align: right; } .gc_footer_use {display: inline-block; Vertical-row: middle; Background-color: # 3F6EB6; Boundary-radius: 1px; Padding: 2%; Status: Relative; Border: 0 px solid red; Margin-right: 5%; } .gc_footer_use_txt {text-align: right; Exhibit: Table-Cell; Vertical-row: middle; White color; Font size: 1em; font-weight: bold; } .gc_footer_use_icon {text-align: right; Exhibit: Table-Cell; Vertical-row: middle; } .gc_footer_nix {display: inline-block; Vertical-row: middle; Background color: # D61920; Boundary-radius: 1px; White color; Font size: 1em; Border: 0x solid green; Padding: 2%; Margin-right: 5%; } .gc_footer_nix_txt {text-align: center; Exhibit: Table-Cell; Vertical-row: middle; Status: Relative; Border: 0 px solid blue; Width: 50%; font-weight: bold; } .gc_footer_nix_icon {text-align: center; Exhibit: Table-Cell; Vertical-row: middle; Status: Relative; Border: 0 px solid yellow; Width: 50%; } .gc_footer_button_wrapper {display: table; Width: 100%; Status: Relative; Border: 0 px solid blue; } .gc_container {background-color: #ffffff; Height: auto; Width: 90%; Display: Table; Margin top: 3%; Margin-bottom: 3%; Margin-left: auto; Margin-Correct: Auto; Status: Relative; Range: 1 px solid # d1d1d1; } .gc_amount, .gc_subtitle, .gc_terms, .gc_footer {border: 0 px 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: 25 px ;; }   

-Peter-Use , and then you will be able to set the width on the images. Bella:

Comments

Popular posts from this blog

c - Mpirun hangs when mpi send and recieve is put in a loop -

python - Apply coupon to a customer's subscription based on non-stripe related actions on the site -

java - Unable to get JDBC connection in Spring application to MySQL -