twitter-bootstrap – Twitter引导程序,在移动设备上将图像拉伸

发布时间：2020-12-17 21:27:15 所属栏目：安全来源：网络整理

导读：我有一个应用程序需要拉伸图像以填满整个屏幕.我正在使用twitter bootstrap框架,一切都在桌面上运行良好,但在我的galaxy s3上,图像无法扩展. 页面的整个src看起来像这样(不要担心它很小;)) html lang="en"head meta charset="utf-8" meta content="width=dev

我有一个应用程序需要拉伸图像以填满整个屏幕.我正在使用twitter bootstrap框架,一切都在桌面上运行良好,但在我的galaxy s3上,图像无法扩展.

页面的整个src看起来像这样(不要担心它很小;))

<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>

我想不出有什么理由不起作用？每秒使用一些javascript重新加载图像,我没有包含在上面的代码中.但我认为这不是问题.

任何帮助将不胜感激,

艾伦

解决方法

丹尼尔斯回应后,我想出了办法,谢谢丹尼尔.

<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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!