как исправить изображение на устройствах

0

зазор приложения получения выходного изображения скольжения, но он приходит, как с прокруткой, но я хочу, чтобы экран на любой мобильный, как (4,5 дюйма)
здесь бит кода: -

<!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="responsiveslides.js"></script>

<style>
.caption {
  display: block;
  position: absolute;
  z-index: 2;
  font-size: 20px;
  text-shadow: none
  color: #fff;
  background: #000;
  background: rgba(0,0,0, .8);
  left: 0;
  right: 0;
  bottom: 15;
  padding: 10px 20px;
  margin: -2;
  margin-top:-70px;
  max-width: none;
  }
img {
  max-width: 100%;  
  height: auto
     }
.one{ float:right}
 html, body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #container {
                width: inherit;
                height: inherit;
                margin: 0;
                padding: 0;
                        }

</style>
<body>
<div class="slideshow">
<div id="container">
     <img src="images/1 copy.jpg" alt=""></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="images/2 copy.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="images/3 copy.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="images/4 copy.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>
</body>
<script>


$(function() {
    $(".slideshow > div:gt(0)").hide();

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

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

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


       Redirect();

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

</script>
</html>

Этот вывод кода - это изображение, автоматически скользящее, но моя проблема заключается в изображении с прокруткой. Я хочу, чтобы изображение соответствовало экрану любых устройств. Итак, дайте мне любую идею

  • 0
    Вам нужно будет предоставить ссылку на инициализированный responseiveslides.js плюс показать нам, какие изображения были использованы в вашем примере. Ваш текущий пример не достаточно.
  • 0
    @Gajotres спасибо Ответ responsiveslides.com я скачал responsiveslides.js сформировать эту ссылку мне нужно любое изображение с этими размерами 1081 * 1921 По размеру экрана
Теги:
jquery-mobile

1 ответ

1
Лучший ответ

Я полностью переработал ваш код, главным образом потому, что вы включили jQuery Mobile без использования правильного синтаксиса jQuery Mobile внутри вашего 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>
  • Я использовал 4 манекена 1080 * 1920 изображений, чтобы проверить этот пример

  • Поскольку вы являетесь usinh jQuery Mobile, ваш код теперь завернут внутри:

    <div data-role="page" id="index">
  • Недостаточно установить высоту 100% для вашего изображения при работе с jQuery Mobile, поэтому я использую функцию getRealContentHeight для получения правильной высоты содержимого
  • Высота контента вычисляется во время события showhow, потому что это только время, когда jQuery Mobile может вычислять правильную высоту содержимого
  • fadeOut является se до 1, потому что, когда старое изображение сгибается, оно по-прежнему показывается следующим образом ниже, что стало причиной появления второго слайдера.
Поделиться
  • 0
    большое спасибо я постараюсь
  • 0
    Спасибо, это работает хорошо, но когда проверяю мою проблему ширины мобильного телефона как (это показывает пробел на левом изображении)
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню