twitter-bootstrap Twitter bootstrap，在移动设备上将图像拉伸到全屏
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12839134/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter bootstrap, stretch an image to full screen on mobile
提问by Alan Hollis
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.
我有一个应用程序，需要拉伸图像以填满整个屏幕。我正在使用 twitter bootstrap 框架，一切都在桌面上运行良好，但在我的 Galaxy s3 上，图像无法缩放。
The entire src for the page looks like this (don't worry it's small ;))
页面的整个 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>
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.
我想不出任何原因为什么这不起作用？图像每秒都会使用一些我没有包含在上面代码中的 javascript 重新加载。但我认为这不是问题。
Any help would be greatly appreciated,
任何帮助将不胜感激，
Alan
艾伦
采纳答案by Alan Hollis
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>
回答by ditscheri
I don't hace a Galaxy S3 to test, but maybe this works for you: http://jsfiddle.net/EveAf/1/
我没有要测试的 Galaxy S3，但也许这对你有用：http: //jsfiddle.net/EveAf/1/
