title: how to fit an image height to content height in jqueryMoblie
body: <p>I have 4 images.I did swipe on 4 images but it's not fit all mobile screen height .Please give me any idea.
  my code:-</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="initial-scale=1"&gt;
      &lt;title&gt;Simple Swiper App&lt;/title&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Don't forget to get the latest Swiper and scrollbar version here--&gt;
      &lt;script src="js/idangerous.swiper-2.0.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/idangerous.swiper.scrollbar-2.0.js"&gt;&lt;/script&gt;
      &lt;script src="js/simple-app.js"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css"&gt;
      &lt;link rel="stylesheet" href="css/idangerous.swiper.css"&gt;
      &lt;link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css"&gt;
      &lt;link rel="stylesheet" href="css/normalize.css"&gt;
      &lt;link rel="stylesheet" href="css/simple-app.css"&gt;
  &lt;/head&gt;
      &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
  var screen = $.mobile.getScreenHeight();
  alert(screen);
  
  var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
  alert(header);
  var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
  alert(footer);
  var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
  
  var content = screen - header - footer - contentCurrent;
  
  $(".ui-content").height(content);
  &lt;/script&gt;
  &lt;body&gt;
  &lt;div data-role="page" data-theme="b"&gt;
  &lt;div data-role="header" data-position="fixed" id="header" role="banner" class="ui-header ui-bar-inherit" style="background-color: #666666;" data-theme="b"&gt;
              &lt;a href="#" data-rel="back" class="ui-btn  ui-corner-all ui-icon-carat-l ui-btn-icon-notext"&gt;&lt;/a&gt;
               &lt;h6 &gt;Home&lt;/h6&gt;
              &lt;a rel="external" href="../html/responsive2305.html" class="ui-btn  ui-corner-all ui-icon-home ui-btn-icon-notext"&gt; &lt;!-- class="ui-btn-right ui-btn ui-icon-home ui-btn-icon-right" --&gt; data-role="button" style="margin-top:10px;"&gt;&lt;/a&gt;
       &lt;/div&gt; 
  &lt;div data-role="content"&gt;
      &lt;div class="swiper-pages swiper-container"&gt;
          &lt;div class="swiper-wrapper"&gt;
              &lt;div class="swiper-slide"&gt;&lt;img src="img/gallery-1.jpg" alt="" height="100%" width="100%"/&gt;&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;&lt;img src="img/gallery-2.jpg" alt="" height="100%" width="100%"/&gt;&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;&lt;img src="img/gallery-4.jpg" alt="" height="100%" width="100%"/&gt;&lt;/div&gt;
              &lt;div class="swiper-slide"&gt;&lt;img src="img/gallery-5.jpg" alt="" height="100%" width="100%"/&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
        &lt;div data-role="footer" data-theme="a" data-position="fixed" id="footer" style="background:blue;"&gt;
              &lt;ul data-role="listview"&gt;
                                  &lt;li&gt;&lt;a class="th" rel="external" href="../html/Calculation.html" style="font-family:Segoe UI; color:black; text-shadow:0px 0px; font-size:15px; font-weight:normal; height:25px;text-decoration:none;"&gt;Save with lighting&lt;/a&gt;&lt;a class="th" href="#" data-rel="popup"&gt;List Item&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a class="th" rel="external" href="../html/one.html" data-rel="popup" style="color:black; text-shadow:0px 0px; font-size:15px;font-family:Segoe UI;font-weight:normal;height:25px;text-decoration:none;"&gt;Explore light options&lt;/a&gt;&lt;a class="th" href="#" data-rel="popup"&gt;List Item&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
         &lt;/div&gt; 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but i tried to fit image on any screen like:-</p>
  
  <pre><code>&lt;script type='text/javascript'&gt; 
  var screen = $.mobile.getScreenHeight();
  alert(screen);
  
  var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
  alert(header);
  var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
  alert(footer);
  var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();
  
  var content = screen - header - footer - contentCurrent;
  
  $(".ui-content").height(content);
  &lt;/script&gt;
  </code></pre>
  
  <p>but it's not working 
  So Please tell me what wrong in my code and then Please give me any idea about my problem 
  Thanks in Advanced  </p>