This is a migrated thread and some comments may be shown as answers.

Image doesn't fit, but it should!

2 Answers 24 Views
General Discussion
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
masta
Top achievements
Rank 1
masta asked on 28 Nov 2013, 09:01 PM
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 Answers, 1 is accepted

Sort by
0
Steve
Telerik team
answered on 03 Dec 2013, 01:48 PM
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.
0
Accepted
masta
Top achievements
Rank 1
answered on 03 Dec 2013, 04:38 PM
Most helpful thank you!

Les
Tags
General Discussion
Asked by
masta
Top achievements
Rank 1
Answers by
Steve
Telerik team
masta
Top achievements
Rank 1
Share this question
or