title: How to fit in an image inside span tag when onclick?
body: <p>I have an image inside a span tag. But the problem is the image doesn't fit inside the span tag. Instead a part of the image goes out of the span tag.</p>
  
  <p>I want to have when onclick on the word span it change the image color while when i onclick on that image it will change the color of the text. I guess something wrong on my code.</p>
  
  <p>How can I achieve it?</p>
  
  <p>MY HTML : </p>
  
  <pre><code>&lt;div class="games-platform-item pt-item"&gt;
  &lt;ul class="games-sub-menu clearfix"&gt;
  &lt;li class="tab1 current"&gt;
      &lt;!-- &lt;img src="../images/abc11.jpg"/ class="topimgG1" "&gt; --&gt;
      &lt;input type="radio" name="imgSwap" id="rdoImg1"&gt;
      &lt;label class="topimgG1" for="rdoImg1"&gt;&lt;/label&gt;
      &lt;span&gt;编辑精选&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="tab2"&gt;
      &lt;div&gt;
          &lt;!-- &lt;img src="../images/abc2.jpg"/ class="topimgG2" "&gt; --&gt;
          &lt;input type="radio" name="imgSwap" id="rdoImg2"&gt;
          &lt;label class="topimgG2" for="rdoImg2"&gt;&lt;/label&gt;
          &lt;span&gt;老虎机&lt;/span&gt;
      &lt;/div&gt;
  &lt;/li&gt;
  &lt;li class="tab3"&gt;
      &lt;!-- &lt;img src="../images/abc3.jpg"/ class="topimgG3" "&gt; --&gt;
      &lt;input type="radio" name="imgSwap" id="rdoImg3"&gt;
      &lt;label class="topimgG3" for="rdoImg3"&gt;&lt;/label&gt;
      &lt;span&gt;桌面游戏&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="tab4"&gt;
      &lt;!-- &lt;img src="../images/abc4.jpg"/ class="topimgG4" "&gt; --&gt;
      &lt;input type="radio" name="imgSwap" id="rdoImg4"&gt;
      &lt;label class="topimgG4" for="rdoImg4"&gt;&lt;/label&gt;
      &lt;span&gt;累计大奖&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="tab5"&gt;
      &lt;!-- &lt;img src="../images/abc5.jpg"/ class="topimgG5" "&gt; --&gt;
      &lt;input type="radio" name="imgSwap" id="rdoImg5"&gt;
      &lt;label class="topimgG5" for="rdoImg5"&gt;&lt;/label&gt;
      &lt;span&gt;小游戏&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="tab6"&gt;
      &lt;!-- &lt;img src="../images/abc6.jpg"/ class="topimgG6" "&gt;   --&gt;
      &lt;input type="radio" name="imgSwap" id="rdoImg6"&gt;
      &lt;label class="topimgG6" for="rdoImg6"&gt;&lt;/label&gt;
      &lt;span&gt;视频扑克&lt;/span&gt;
  &lt;/li&gt;
  &lt;li class="tab7"&gt;
      &lt;!-- &lt;img src="../images/abc7.jpg"/ class="topimgG7" "&gt; --&gt;
      &lt;input type="radio" name="imgSwap" id="rdoImg7"&gt;
      &lt;label class="topimgG7" for="rdoImg7"&gt;&lt;/label&gt;
      &lt;span&gt;所有游戏&lt;/span&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>MY CSS : </p>
  
  <pre><code>/*Hide the Radio Button*/
  
  .games-sub-menu input[type=radio] {
      display: none
  }
  /*Set a box for the label, this is what is clicked on*/
  
  .games-sub-menu label {
      display: block;
      width: 150px;
      height: 100px;
  }
  /*Set Images...this would work better with sprites*/
  
  .games-sub-menu label.topimgG1 {
      background-image: url("../images/abc1.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 820px;
      top: 0px;
      position: absolute;
      z-index: 999;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG1 {
      background-image: url("../images/abc1_onclick.jpg");
  }
  .games-sub-menu label.topimgG2 {
      background-image: url("../images/abc2.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 690px;
      top: 0px;
      position: absolute;
      z-index: 999;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG2 {
      background-image: url("../images/abc2_onclick.jpg");
  }
  .games-sub-menu label.topimgG3 {
      background-image: url("../images/abc3.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 560px;
      top: 0px;
      position: absolute;
      z-index: 999;
      clear: both;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG3 {
      background-image: url("../images/abc3_onclick.jpg");
  }
  .games-sub-menu label.topimgG4 {
      background-image: url("../images/abc4.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 430px;
      top: 0px;
      position: absolute;
      z-index: 999;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG4 {
      background-image: url("../images/abc4_onclick.jpg");
  }
  .games-sub-menu label.topimgG5 {
      background-image: url("../images/abc5.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 305px;
      top: 0px;
      position: absolute;
      z-index: 999;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG5 {
      background-image: url("../images/abc5_onclick.jpg");
  }
  .games-sub-menu label.topimgG6 {
      background-image: url("../images/abc6.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 18 5px;
      top: 0px;
      position: absolute;
      z-index: 999;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG6 {
      background-image: url("../images/abc6_onclick.jpg");
  }
  .games-sub-menu label.topimgG7 {
      background-image: url("../images/abc7.jpg");
      background-repeat: no-repeat;
      width: 80px;
      height: 40px;
      right: 43px;
      top: 5px;
      position: absolute;
      z-index: 999;
  }
  .games-sub-menu input[type=radio]:checked + label.topimgG7 {
      background-image: url("../images/abc7_onclick.jpg");
  }
  </code></pre>