Resizing Image xlink:href

Im having trouble figuring our how to set the resizing of an image xlink:href. I want to be able to resize this element considering only heigth(ie height="100%"). I can set this in the tag its self...however, it requires me to also set the width(width="100%)(otherwise the image wont show up). While both of these attributes are set, when i resize the window, the image will always fit entirely in the window. However, this is not what i want. I want to be able to only have the height fit 100% when resizing. (I can do this with an img tag but not with image xlink:href. Am I missing something very simple? Or is there another/better way i should be approaching this? Here is some of my code that pertain to this:

<div id="bottomID">
        <svg >
          <defs >



            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

                  <stop stop-color="white" offset="50%" stop-opacity="2"/>
                   <stop stop-color="white" offset="75%" stop-opacity="1"/>
                  <stop stop-color="white" offset="100%" stop-opacity="0"/>

                </radialGradient>


            <mask id="mask2" x="0" y="0" >

              <!-- Template for cricle -->
              <circle id="circleID" x="300" y="300" r="30"  fill="url(#gradient)"/>

            </mask>                
          </defs>
              //This is the element that im having trouble resizing.
              <image  id="lightMap"  xlink:href="images/lightMapMd.jpg"  height="100%" width="100%"

                  fill= "#0000ff" mask= "url(#mask2)" />

        </svg>



    </div>