我正在尝试设计一个带有 Bootstrap 的响应式页面，该页面使用 % 中的高度进行划分，以便滚动条不应该出现用于较小的设备屏幕并且它包含我想对不同尺寸的手机和平板电脑响应的图像部分，但我对正确的方法感到困惑。我尝试使用 Bootstrap 的 img-responsive 类，但是当我在 intel XDK 中的不同设备上运行它时，它会按照下面的代码溢出。所以我只需要一个正确的方向来让它变得完美。
JSFIDDLE:Jsfiddle link
注意:它在 jsfiddle 中没有溢出，但在 intel XDK 中不一样。我正在使用 intel xdk，因为我想在混合应用程序中使用此页面。
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>:: ૮૪ બેઠકજી ::</title>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="b/css/bootstrap.min.css" />
<link rel="stylesheet" href="css/start.css" />
</head>
<body>
<!--<script src="cordova.js"></script>-->
<header>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="main_title">Title</div>
</div>
</div>
</div>
</header>
<section id="photo">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12" id="cont">
<img src="img/aaa.jpg" id="start_img" class="img-responsive center-block">
</div>
</div>
</div>
</section>
<section id="button">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<center><a href="" class="btn btn-danger" id="start_a"> પ્રવેશ </a></center>
</div>
</div>
</div>
</section>
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<center><div class="f1">heading </div></center>
</div>
</div>
<div class="row" id="a1">
<div class="col-md-3 col-sm-3 col-xs-3">
<div class="f2">some text</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<div class="f2">some text</div>
</div>
</div>
</div>
</footer>
<script src="js/jquery.js"></script>
<script src="b/js/bootstrap.min.js"></script>
</body>
</html>
CSS:
html,body{
height:100%;
margin:0;
top:0;
bottom:0;
height:100%;
min-width:100%;
max-height:100%;
background:#ff9800;
overflow:hidden;
}
header{height:14%;}
section#photo{height:50%;background:red;}
section#button{height:13%;}
footer{height:23%;background:green;}
div.main_title{
color:#fff;
text-align:center;
line-height:1.3em;
font-size:2em;
font-weight:bold;
margin-top:0.5em;
margin-bottom:0.5em;
}
a#start_a{margin-top:0.5em;font-size:1.6em;padding-left:1.5em;padding-right:1.5em;}
div.f1{
color:#fff;
font-weight:bold;
font-size:1.3em;
}
div#a1{padding-top:0.5em;}
div.f2{
color:brown;
text-align:center;
font-weight:bold;
font-size:1.3em;
}
@media screen and (orientation:landscape) {
html,body{height:auto;overflow:auto;}
}
我使用了 700 像素 x 700 像素的指定图像尺寸，因为我认为它不会在大型设备上模糊。
最佳答案
在#cont 上使用背景图片而不是 img 标签，并将大小设置为覆盖:
<div class="col-md-12 col-sm-12 col-xs-12" id="cont"></div>
#cont {
width:100%;
height:300px;
background-image:url(../img/aaa.jpg);
background-size:cover;
}
关于android - 不同手机和平板电脑的响应图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35451031/