CODEWITHSUNDEEP
twitter-bootstrapresponsive-design
Alan Hollis
Alan Hollis

Reputation: 1322

Twitter bootstrap, stretch an image to full screen on mobile

I've got an application where an image needs to be stretched to fill the whole screen. I'm using the twitter bootstrap framework and everything works great on the desktop but on my galaxy s3 the image doesn't scale.

The entire src for the page looks like this (don't worry it's small ;))

<html lang="en">
<head>
    <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <link href="/assets/a4727ffb/css/bootstrap.css" type="text/css" rel="stylesheet">
        <link href="/assets/a4727ffb/css/bootstrap-responsive.css" type="text/css" rel="stylesheet">
        <link href="/assets/a4727ffb/css/bootstrap-yii.css" type="text/css" rel="stylesheet">
        <script src="/assets/44b05ae/jquery.js" type="text/javascript"></script>
        <script src="/assets/a4727ffb/js/bootstrap.js" type="text/javascript"></script>
</head>
<body>
<style>
    .container-fluid {
          padding: 0px;
    }
</style>

<div class="container-fluid">
    <div class="row-fluid">
            <img alt="camera" src="/index.php/camera/getLatestImage/28?0.660698722382962" style="width:100%;height:100%">
    </div>
</div>
</body>
</html>

I can't think of any reason why this wouldn't work? The image is reloaded every second with some javascript which I haven't included in the above code. But I assume that wouldn't be the issue.

Any help would be greatly appreciated,

Alan

Upvotes: 4

Views: 10833

Answers (2)

Alan Hollis
Alan Hollis

Reputation: 1322

After Daniels response I figured out a way, thanks Daniel.

<html lang="en">
<head>
        <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <link href="/assets/a4727ffb/css/bootstrap.css" type="text/css" rel="stylesheet">
        <link href="/assets/a4727ffb/css/bootstrap-responsive.css" type="text/css" rel="stylesheet">
        <link href="/assets/a4727ffb/css/bootstrap-yii.css" type="text/css" rel="stylesheet">
        <script src="/assets/44b05ae/jquery.js" type="text/javascript"></script>
        <script src="/assets/a4727ffb/js/bootstrap.js" type="text/javascript"></script>
    <style>
        html, body {background:none;height:100%; margin:0; padding:0;}
        .camera-holder {position:fixed; top:0; left:0; width:100%; height:100%;z-index:-1;}
        </style>
        </head>
        <body>
        <style>
            .container-fluid {
                  padding: 0px;
            }
        </style>
        <div class="container-fluid">
            <div class="row-fluid">
        <div class="camera-holder">
                    <img alt="camera" src="/index.php/camera/getLatestImage/28?0.660698722382962" style="width:100%;height:100%">
        </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 4

ditscheri
ditscheri

Reputation: 579

I don't hace a Galaxy S3 to test, but maybe this works for you: http://jsfiddle.net/EveAf/1/

Upvotes: 1

Related Questions