Image doesn't fit, but it should!

3 posts, 2 answers
  1. Answer
    masta
    masta avatar
    2 posts
    Member since:
    Nov 2013

    Posted 28 Nov 2013 Link to this post

    Simple problem? I have an image that should fit onto a iPhone screen...but doesn't. Wondering what I am missing.

    Image is 266x700, but cutoff about 2/3  in the Y direction. See attached screen shot. fyi, got same result on device.

    Code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello, World</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
        <link href="styles/main.css" rel="stylesheet" />

        <script src="cordova.js" type="text/javascript"></script>
        <script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
        <script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
        <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>

        <script src="scripts/login.js" type="text/javascript"></script>
        <script src="scripts/location.js" type="text/javascript"></script>
    </head>
    <body>

        <!--Home-->
        <div id="page-home" data-role="page">

            <!--Header-->
            <div data-role="header" data-position="fixed">
                <h1>Home!</h1>
            </div>

            <!--Content-->
            <div data-role="content">
                <div id="right_inspect"> <img src="images/right.png"  alt="" width="260" height="700"  id="right_pic"/>
                   
          
                </div>
            </div>
            <div class="nav">
                <ul data-role="listview">
                    <li>
                        <a href="#page-ui-interaction" data-transition="slide">UI Interaction Example</a>
                    </li>
                    <li>
                        <a href="#page-location" data-transition="slide">Location Example</a>
                    </li>
                </ul>
            </div>

            <!--Footer-->
            <div data-role="footer" data-position="fixed" data-id="oneFooter">
                <span class="footerText">Built with Icenium&trade;</span>
            </div>

        </div>

        <!--UI interaction-->
        <div id="page-ui-interaction" data-role="page" data-add-back-btn="true">

            <!--Header-->
            <div data-role="header" data-position="fixed">
                <h1>Login</h1>
            </div>

            <!--Content-->
            <div data-role="content">
                <div id="login-wrap">
                    <form data-ajax="false" id="login-form">
                        <h3 id="login-text">Enter your credentials:</h3>
                        <div>
                            <input id="login-username" type="text" placeholder="Username" />
                            <input id="login-password" type="password" placeholder="Password" />
                        </div>

                        <div class="buttons" class="ui-bar">
                            <div id="button-area">
                                <div class="left">
                                    <input type="submit" id="login" data-icon="check" data-inline="true" class="left" value="Login" />
                                </div>
                                <div class="right">
                                    <button id="login-reset" data-icon="delete" data-inline="true" class="right">Reset</button>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div>
                    </form>
                </div>

                <div id="logout-wrap">
                    <div>
                        <h1 class="welcome">Welcome, <span id="logout-username"></span>!
                        </h1>
                    </div>

                    <div class="buttons">
                        <div id="button-area" data-role="controlgroup" data-type="horizontal">
                            <button id="logout" data-icon="back">Logout</button>
                        </div>
                    </div>
                </div>
            </div>

            <!--Footer-->
            <div data-role="footer" data-position="fixed" data-id="oneFooter">
                <span class="footerText">Built with Icenium&trade;</span>
            </div>

        </div>

        <!--Location-->
        <div id="page-location" data-role="page" data-add-back-btn="true">

            <!--Header-->
            <div id="page-location-header" data-role="header" data-position="fixed">
                <h1>Location</h1>
            </div>

            <!--Content-->
            <div id="page-location-content" data-role="content">
                <div id="map-search-wrap">
                    <a id="map-navigate-home"></a>
                    <form data-ajax="false" onsubmit="return false;">
                        <input id="map-address" type="search" data-role="none" placeholder="Address" />
                        <input id="map-search" type="submit" value="" data-role="none" />
                    </form>
                </div>
                <div id="map-canvas"></div>
            </div>

            <!--Footer-->
            <div id="page-location-footer" data-role="footer" data-position="fixed" data-id="oneFooter">
                <span class="footerText">Built with Icenium&trade;</span>
            </div>

        </div>
        <script type="text/javascript">
            document.addEventListener('deviceready', function () {
                navigator.splashscreen.hide();
            }, false);
        </script>
    </body>
    </html>


  2. Steve
    Admin
    Steve avatar
    10941 posts

    Posted 03 Dec 2013 Link to this post

    Hello,

    Because you need 568 in vertical dimension, not 700. The following articles should shed more light:
    • http://www.idev101.com/code/User_Interface/sizes.html
    • https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7
    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Answer
    masta
    masta avatar
    2 posts
    Member since:
    Nov 2013

    Posted 03 Dec 2013 Link to this post

    Most helpful thank you!

    Les
Back to Top