图片未正确显示在网页中答案

【问题标题】：images are not properly shown in webpage图片未正确显示在网页中
【发布时间】：2015-10-07 11:39:57
【问题描述】：

我对引导程序完全陌生。我在 Bootstrap 3.0 中做了一个网站。该网站在我的笔记本电脑上正常运行。但是当我托管该网站时，一些图像没有加载到网页中。此外，当我尝试在移动设备中打开网站时，轮播图像不适合轮播，我的意思是它会留下一些空白空间，它不会覆盖整个轮播空间。在移动设备上加载网站时，背景图像也没有完全适合屏幕。请帮帮我，我完全被卡住了。我的网址是WWW.krishzone.com

我的代码是

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">

<title>Krishh Kidss Zone</title>

<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">



<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="css/lightbox.css" rel="stylesheet">
<link href="css/navbar.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">



<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

</head>
<body style="background: url(../img/background1.png) no-repeat center center fixed"
style="-webkit-background-size: cover"
style="moz-background-size: cover"
style="-o-background-size: cover"
style="background-size: cover">
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top " role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="index.html">Krishh Kidss Zone</a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="about.html">About Us </a>
            </li>
            <li><a href="whykrishkids.html">Why Krishh Kidss</a>
            </li>
            <li><a href="admission.html">Admissions</a>
            </li>
            <li><a href="events.html">Events</a>
            </li>
            <li><a href="gallery.html">Gallery</a>
            </li>
            <li><a href="achivements.html">Achivements</a>
            </li>
            <li><a href="contact.html">Contact Us</a>
            </li>

        </ul>
        </div>
    </div>
</div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

<!-- Header Carousel -->
<header id="myCarousel" class="carousel slide">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner">
    <div class="item active">
            <img src="../img/school.jpg" alt="learn" style="max-width:100%" style="height:auto" class="img-responsive">
            <div class="carousel-caption">
                <h2>Krishh Kidss Zone...</h2>
            </div>
            </div>
        <div class="item">
            <img src="../img/learning.JPG" alt="Fun" style="max-width:100%" style="height:auto" class="img-responsive">
                <div class="carousel-caption">
                <h2>Where Learning is...</h2>
            </div>
        </div>
        <div class="item">
            <img src="../img/playing.jpg" alt="play" style="max-width:100%" style="height:auto" class="img-responsive">
            <div class="carousel-caption">
                <h2>Fun</h2>
            </div>
        </div>

    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
        <span class="icon-prev"></span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
        <span class="icon-next"></span>
    </a>
</header>

<!-- Page Content -->
<div class="container">

    <!-- Marketing Icons Section -->
    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">
                Krishh Kidss Zone
            </h1>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Vision</h4>
                </div>
                <div class="panel-body">
                    <p>
                    "To make your child grow into complete personality and develop the strength to meet the challenges ahed."
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                    </p>
                    <div class="text-center">
                    <a href="vision.html" class="btn btn-default">Read More</a>
                </div>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>About Us</h4>
                </div>

                <div class="panel-body">
                    <p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s learning with the help of fun.</p>
                    <div class="text-center">
                    <a href="about.html" class="btn btn-default">Read More</a>
                </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>Events</h4>
                </div>
                <div class="panel-body">
                    <p>
                    We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
                    <br/>
                    <br/>
                    </p>                        
                    <div class="text-center">
                    <a href="events.html" class="btn btn-default">See More</a>
                </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Features Section -->



    <!-- /.row -->

    <hr>

    <!-- Call to Action Section -->
    <div class="well">
        <div class="row">
            <div class="col-md-8">
                <h3> Contact Us:</h3>

                <p>Adress:<br/>
                18 Sarita Vihar,<br/>
                Opp. Kartavya Bunglows,<br/>
                Anand Nadiad Road,<br/>
                Lambhvel, 387-310<br/>
                Anand, Gujarat</p><br/>

            </div>
            <div class="col-md-4">
            <p>Contact Details<br/>
            Ph.No. +91 99799 64200             <br/>
            Like Us On Facebook
            <ul class="list-unstyled list-inline list-social-icons">
                <li>
                    <a href="https://www.facebook.com/Krishkidszone?fref=ts"><i class="fa fa-facebook-square fa-2x"></i></a>
                </li>
            </ul></p>
            <p>Copyright &copy; Krishh Kidss Zone 2015</p>
            <p>Developed By: Shree InfoTech Ltd.</p>
            </div>
        </div>
    </div>

    <hr>

    <!-- Footer -->

</div>
<!-- /.container -->

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/lightbox.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
$('.carousel').carousel({
    interval: 5000 //changes the speed
})
</script>


</body>

【问题讨论】：

@spinon 我需要编辑图片的路径吗？？
您可以使示例更好地工作。我只是在更新 HTML 的格式，因为它在中间分解了。
@spinon 哦。知道了。我已经解决了有关图像的问题，但轮播和背景图像仍未解决。

标签： image twitter-bootstrap mobile device

【解决方案1】：

您有多个重复或完全不合适的 div 和 nav 标签。您在轮播中的图像包含多个style 标签style="max-width:100%" style="height:auto"，这应该是style="max-width:100%; height:auto;"，但如果您确实需要应用规则，则应该进入样式表。

这个例子应该为你提供一个更好的起点。

$('.carousel').carousel({
  interval: 5000 //changes the speed
})

body {
  background: url(http://placehold.it/1350x1050/5E58D1/fff/) no-repeat center center fixed;
  background-size: cover;
}
html,
body {
  height: 100%;
}
.navbar.navbar-default {
  font-size: 16px;
  background-color: #3A368C;
  border-width: 0px;
  border-radius: 0px;
}
.navbar.navbar-default .navbar-nav > li > a {
  color: #FAF2F2;
  background-color: #161263;
}
.navbar.navbar-default .navbar-nav > li > a:hover {
  color: #FAF2F2;
  background-color: #3C3880;
}
.navbar.navbar-default .navbar-brand,
.navbar.navbar-default .navbar-brand:hover {
  color: #fff;
}
.navbar.navbar-default .navbar-toggle {
  border-color: #5E58D1;
}
.navbar.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
}
.carousel,
.item,
.active {
  height: 100%;
}
.carousel-inner {
  height: 100%;
}
.fill {
  width: 100%;
  height: 100%;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}
.carousel.fade {
  opacity: 1;
}
.carousel.fade .item {
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  z-index: 1;
}
.carousel.fade .item:first-child {
  top: auto;
  position: relative;
}
.carousel.fade .item.active {
  opacity: 1;
  -moz-transition: opacity ease-in-out .7s;
  -o-transition: opacity ease-in-out .7s;
  -webkit-transition: opacity ease-in-out .7s;
  transition: opacity ease-in-out .7s;
  z-index: 2;
}
.carousel-control {
  z-index: 2;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav id="#custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"> <span class="sr-only">Toggle navigation</span>  <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#"> Krishh Kidss Zone</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-menubuilder">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="about.html">About Us </a> 
        </li>
        <li><a href="whykrishkids.html">Why Krishh Kidss</a> 
        </li>
        <li><a href="admission.html">Admissions</a> 
        </li>
        <li><a href="events.html">Events</a> 
        </li>
        <li><a href="gallery.html">Gallery</a> 
        </li>
        <li><a href="achivements.html">Achivements</a> 
        </li>
        <li><a href="contact.html">Contact Us</a> 
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel fade">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for Slides -->
  <div class="carousel-inner">
    <div class="item active">
      <!-- Set the first background image using inline CSS below. -->
      <div class="fill" style="background-image:url('http://desktop-pictorials.com/SingleScreen/SinglePage01/Island002-1920x1080.jpg');"></div>
    </div>
    <div class="item">
      <!-- Set the second background image using inline CSS below. -->
      <div class="fill" style="background-image:url('http://img.phombo.com/img1/photocombo/4448/The_Best_HD_HQ_Hi-Res_Wallpapers_Collection_-_Cityscape_by_tonyx__145_pictures-61.jpg_HDTV_monaco_1920x1080.jpg');"></div>
    </div>
    <div class="item">
      <!-- Set the third background image using inline CSS below. -->
      <div class="fill" style="background-image:url('https://interfacelift.com/wallpaper/7yz4ma1/01407_harboursunset_1920x1080.jpg');"></div>
    </div>
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> 
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> 
  </a>
</header>
<div class="container">

  <!-- Marketing Icons Section -->
  <div class="row">
    <div class="col-lg-12">
      <h1 class="page-header"> Krishh Kidss Zone </h1>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>Vision</h4>
        </div>
        <div class="panel-body">
          <p>"To make your child grow into complete personality and develop the strength to meet the challenges ahed."
            <br/>
            <br/>
            <br/>
            <br/>
          </p>
          <div class="text-center"> <a href="vision.html" class="btn btn-default">Read More</a> 
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>About Us</h4>
        </div>
        <div class="panel-body">
          <p>We have started Krishh Kidss Zone pre school in 11th February 2010 with motto to give best primary education to children with out any burden. We adopt the simple and effective slogan “Where learning is Fun” , where we always focus on the children’s
            learning with the help of fun.</p>
          <div class="text-center"> <a href="about.html" class="btn btn-default">Read More</a> 
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">
          <h4>Events</h4>
        </div>
        <div class="panel-body">
          <p>We celebrate almost each and every festivals and days as a part of our curriculam. That will help the children to know and understand the impotance of the festivals and days. We try to fill the colours in education by celebrating such events.
            <br/>
            <br/>
          </p>
          <div class="text-center"> <a href="events.html" class="btn btn-default">See More</a> 
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Features Section -->

  <!-- /.row -->

  <hr>

  <!-- Call to Action Section -->
  <div class="well">
    <div class="row">
      <div class="col-md-8">
        <h3> Contact Us:</h3>
        <p>Adress:
          <br/>18 Sarita Vihar,
          <br/>Opp. Kartavya Bunglows,
          <br/>Anand Nadiad Road,
          <br/>Lambhvel, 387-310
          <br/>Anand, Gujarat</p>
        <br/>
      </div>
      <div class="col-md-4">
        <p>Contact Details
          <br/>Ph.No. +91 99799 64200
          <br/>Like Us On Facebook
          <ul class="list-unstyled list-inline list-social-icons">
            <li> <a href="https://www.facebook.com/Krishkidszone?fref=ts"><i class="fa fa-facebook-square fa-2x"></i></a> 
            </li>
          </ul>
        </p>
        <p>Copyright &copy; Krishh Kidss Zone 2015</p>
        <p>Developed By: Shree InfoTech Ltd.</p>
      </div>
    </div>
  </div>
  <hr>

  <!-- Footer -->

</div>
<!-- /.container -->

【讨论】：

我已经解决了图像的问题，但我仍然无法弄清楚背景问题
您是否更新了您发布的代码以反映所有这些？
我已更新代码以反映更改。但仍然没有解决背景图像问题。请帮帮我