老师请问为什么图片没有按比例缩放？只显示了上面500px，下面的没了。
qq_Pal_0
2015-11-02 18:42
比如IE的那张图 下面都没有了。 看着好奇怪。求解决办法
4回答
-
- 丁吉瑞斯
- 2016-04-20 10:45:31
同提问，我的也是这个问题，缩放屏幕时图片不能填满
-
- 丁吉瑞斯
- 2016-04-20 10:44:22
<!DOCTYPE html>
<html>
<head>
<title>浏览器博物馆</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<script src="script/jquery-1.12.3.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<style>
body {
padding-top: 51px;/*导航固定顶部单不会遮挡内容*/
}
.carousel {
height: 500px;
background-color: #000;
}
.carousel .item {
height: 500px;
background-color: #000;
}
.carousel img {
width: 100%;
}
.carousel-caption {
margin-bottom: 20px;
line-height: 1.8;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">浏览器博物馆</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">综述</a></li>
<li><a href="#">简述</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">特点</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Chrome</a></li>
<li><a href="#">Firefox</a></li>
<li><a href="#">Opera</a></li>
<li><a href="#">IE</a></li>
<li><a href="#">Safari</a></li>
</ul>
</li>
<li><a href="#">关于</a></li>
</ul>
</div>
</div>
</nav>
<div id="myCarousel" class="carousel slide">
<!-- 轮播（Carousel）指标 -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li><!-- data-slide-to是索引，从0开始 -->
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<!-- 轮播（Carousel）项目 -->
<div class="carousel-inner">
<div class="item active ">
<img src="image/firefox0.jpg" alt="Firefox">
<div class="carousel-caption">
<h1>Firefox</h1>
<p>Mozilla Firefox，中文俗称“火狐”（正式缩写为Fx或fx，非正式缩写为FF），是一个自由及开放源代码网页浏览器，使用Gecko排版引擎，支持多种操作系统，如Windows、Mac OS X及GNU/Linux等。</p>
<p>
<a class="btn btn-lg btn-primary" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank" role="button">点我下载</a>
</p>
</div>
</div>
<div class="item">
<img src="image/chrome0.jpg" alt="chrome">
<div class="carousel-caption">
<h1>Chrome</h1>
<p>Chrome浏览器，是一款快速、简单且安全的网络浏览器，能很好地满足新型网站对浏览器的要求。</p>
<p>
<a class="btn btn-lg btn-primary" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank" role="button">点我下载</a>
</p>
</div>
</div>
<div class="item">
<img src="image/safari0.jpg" alt="safari">
<div class="carousel-caption">
<h1>Safari</h1>
<p>Safari，是苹果计算机的最新操作系统Mac OS X中的浏览器，使用了KDE的KHTML作为浏览器的运算核心。</p>
<p>
<a class="btn btn-lg btn-primary" href="http://rj.baidu.com/soft/detail/12966.html?ald" target="_blank" role="button">点我下载</a>
</p>
</div>
</div>
<div class="item">
<img src="image/ie0.jpg" alt="ie">
<div class="carousel-caption">
<h1>IE</h1>
<p>Internet Explorer，是美国微软公司推出的一款网页浏览器。原称Microsoft Internet Explorer(6版本以前)和Windows Internet Explorer(7、8、9、10、11版本)，简称IE。</p>
<p>
<a class="btn btn-lg btn-primary" href="http://windows.microsoft.com/zh-cn/internet-explorer/download-ie" target="_blank" role="button">点我下载</a>
</p>
</div>
</div>
<div class="item">
<img src="image/opera0.jpg" alt="opera">
<div class="carousel-caption">
<h1>Opera</h1>
<p>Opera浏览器，是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器，是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。</p>
<p>
<a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" role="button">点我下载</a>
</p>
</div>
</div>
<!-- <div class="item">
<img src="image/google.jpg" alt="chrome">
<div class="carousel-captain text-center">
<h1>Chrome</h1>
<p>Chrome 浏览器，是一款快速、简单且安全的网络浏览器，能很好地满足新型网站对浏览器的要求。</p>
<p>
<a class="btn btn-lg btn-primary" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank" role="button">点我下载</a>
</p>
</div>
</div>-->
</div>
<!-- 轮播（Carousel）导航按钮 -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev" role="button">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">上一页</span>
</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next" role="button">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">下一页</span>
</a>
</div>
</body>
</html>
-
- pardon110
- 2015-12-26 15:45:21
贴出你写的代码。
-
- pardon110
- 2015-11-04 10:55:31
指定宽度100%或者是高度100%就可以了。
基于bootstrap的网页开发
187669 学习 · 734 问题
相似问题