Question

我有4张图片。我确实在4张图片上滑动，但它并不适合所有的手机屏幕高度。请给我任何想法。我的代码： -

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <title>Simple Swiper App</title>

    <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="js/jquery.min.js"></script>
    <!-- Don't forget to get the latest Swiper and scrollbar version here-->
    <script src="js/idangerous.swiper-2.0.min.js"></script>
    <script src="js/idangerous.swiper.scrollbar-2.0.js"></script>
    <script src="js/simple-app.js"></script>

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/simple-app.css">
</head>
    <script type='text/javascript'>//<![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);
</script>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-position="fixed" id="header" role="banner" class="ui-header ui-bar-inherit" style="background-color: #666666;" data-theme="b">
            <a href="#" data-rel="back" class="ui-btn  ui-corner-all ui-icon-carat-l ui-btn-icon-notext"></a>
             <h6 >Home</h6>
            <a rel="external" href="../html/responsive2305.html" class="ui-btn  ui-corner-all ui-icon-home ui-btn-icon-notext"> <!-- class="ui-btn-right ui-btn ui-icon-home ui-btn-icon-right" --> data-role="button" style="margin-top:10px;"></a>
     </div> 
<div data-role="content">
    <div class="swiper-pages swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="img/gallery-1.jpg" alt="" height="100%" width="100%"/></div>
            <div class="swiper-slide"><img src="img/gallery-2.jpg" alt="" height="100%" width="100%"/></div>
            <div class="swiper-slide"><img src="img/gallery-4.jpg" alt="" height="100%" width="100%"/></div>
            <div class="swiper-slide"><img src="img/gallery-5.jpg" alt="" height="100%" width="100%"/></div>
        </div>
    </div>
</div>
      <div data-role="footer" data-theme="a" data-position="fixed" id="footer" style="background:blue;">
            <ul data-role="listview">
                                <li><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;">Save with lighting</a><a class="th" href="#" data-rel="popup">List Item</a></li>
                                <li><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;">Explore light options</a><a class="th" href="#" data-rel="popup">List Item</a></li>
            </ul>
       </div> 
</div>
</body>
</html>

但我试图将图像放在任何屏幕上，如： -

<script type='text/javascript'> 
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);
</script>

但它没有用所以请告诉我我的代码有什么问题，然后请告诉我有关我的问题的任何想法谢谢高级

如何在jquery Mobile中将图像高度调整为内容高度

0 个答案: