Twitter bootstrap, 모바일에서 이미지를 전체 화면으로 확대

전체 화면을 채우기 위해 이미지를 늘려야하는 애플리케이션이 있습니다. 나는 트위터 부트 스트랩 프레임 워크를 사용하고 있으며 모든 것이 데스크탑에서 잘 작동하지만 내 은하 s3에서는 이미지의 크기가 조정되지 않습니다.Twitter bootstrap, 모바일에서 이미지를 전체 화면으로 확대

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

나는이 작동하지 왜 어떤 이유로 생각할 수 없다)

페이지에 대한 전체 SRC는 다음과 같습니다

(가 작고 걱정하지 마십시오)? 이미지는 위의 코드에 포함되지 않은 몇 가지 자바 스크립트로 초마다 다시로드됩니다. 그러나 나는 그것이 문제가되지 않을 것이라고 생각한다.

어떤 도움을 크게,

앨런

을 감상 할 수있다

출처

2012-10-11 Alan Hollis

다니엘스 응답 후 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>

출처

2012-10-13 19:20:37

내가 테스트를 위해 갤럭시 S3를 HACE하지 않습니다,하지만 어쩌면이 당신을 위해 작동 : 내가 알아 낸 http://jsfiddle.net/EveAf/1/

출처

2012-10-13 09:34:34 ditscheri

작동하지 않았다 :(나는 윈도우의 너비/높이, 대답 할 시간을내어 –

PS 감사를 기반으로 이미지 크기를 수정하는 일부 자바 스크립트를 쓰는 일을 끝낼해야합니다 어떻게 생각 . –

Twitter bootstrap, 모바일에서 이미지를 전체 화면으로 확대

답변

관련 문제