how to fix image on Devices

Question

I have completely redesigned your code, mainly because you've included jQuery Mobile without using correct jQuery Mobile syntax inside your HTML.

HTML:

<!DOCTYPE html>
<html>
<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script src="http://responsiveslides.com/responsiveslides.min.js"></script>

<style>
    .caption {
        display: block;
        position: fixed;
        z-index: 2000;
        font-size: 20px;
        text-shadow: none
        color: #fff;
        background: #000;
        background: rgba(0,0,0, .8);
        left: 0;
        right: 0;
        bottom: 0;
        padding: 10px 20px;
        /*margin: -2;
        margin-top:-70px;*/
        max-width: none;
    }
    img {
        padding: 0;
        margin: 0;
    }
    .one{ 
        float:right
    }
    html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .ui-content {
        padding: 0;
        margin: 0;
    }
    #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>
<script>
    $(window).resize(function() {
        setHeight();
    });

    $(document).on('pageshow', '#index', function(){       
        setHeight();
    });
    
    function setHeight() {
        $.mobile.activePage.find('.ui-content').height(getRealContentHeight());
        $.mobile.activePage.find('img').height(getRealContentHeight()-4);   
    }

    function getRealContentHeight() {
        var header = $.mobile.activePage.find("div[data-role='header']:visible");
        var footer = $.mobile.activePage.find("div[data-role='footer']:visible");
        var content = $.mobile.activePage.find("div[data-role='content']:visible:visible");
        var viewport_height = $(window).height();
        
        var content_height = viewport_height - header.outerHeight() - footer.outerHeight() -2;
        if((content.outerHeight() - header.outerHeight() - footer.outerHeight()) <= viewport_height) {
            content_height -= (content.outerHeight() - content.height());
        } 
        return content_height;
    }
</script>
<body>
<div data-role="page" id="index">            
    <div data-role="content" class="slideshow">
        <div id="container">
            <img src="1.jpg" alt="" height="100%" width="auto"/><br/>
            <div  class="caption"> <font color="white">Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="http://www.google.com" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a></div>
            
        </div>
        
        <div id="container">
            <img src="2.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >First Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
        
        <div id="container">
            <img src="3.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >three Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
        
        <div id="container">
            <img src="4.jpg" alt=""/><br/>
            <div class="caption"><font color="white" >fourth Second dfasdfasasdasdasdna asdasdasdasd asdasdasd asdasd<br/> asdasdasd asdadasd asdasdad</font><a href="G:\html practise phonegap\responsive\validationform.html" style="text-decoration: none">&nbsp;&nbsp;<font color="white"><span class="one">skip</span></font></a>
            </div>
        </div>
    </div>
</div>
</body>
<script>


$(document).on('pageshow', '#index', function(){ 
    $(".slideshow > div:gt(0)").hide();

    setInterval(function() { 
        var currentSlide = $('.slideshow > div:visible:first'),
            nextSlide = currentSlide.next();

        currentSlide.fadeOut(1)
        nextSlide.fadeIn(2000);

        if ((currentSlide.index() + 1) == 4) {


       Redirect();

        }
    },  2000);
    function Redirect() {
        window.location="https://www.google.co.in";
    }
});

</script>
</html>

I have used 4 dummy 1080*1920 images to test this example
Because you are usinh jQuery Mobile your code is now wrapped inside:
```
  <div data-role="page" id="index"> 
```
It is not enough to set 100% height to your image when working with jQuery Mobile, that's why I am using function getRealContentHeight to get correct content height
Content height is calculated during pageshow event because that is only time when jQuery Mobile can calculate correct content height
fadeOut is se to 1 because while old image is fadding out it is still showing thus pusshing next image below, which was a reason why second slider was showing in the first place.