Question

我的网站在我的本地计算机上运行如何，但是当我在其他计算机上查看时，幻灯片中的图像会以各种不同的大小呈现。它在我的计算机上运行良好，但我在排除代码时遇到问题，因为我无法在本地环境中看到问题。有没有人就如何解决您在本地计算机上看不到的前端问题提出建议？我通过W3C验证器运行代码，但我感到不知所措，但它是输出。任何指导将不胜感激！（抱歉所有内联的东西，我正在帮助一位在Dreamweaver工作的朋友，并被要求以这种方式离开。）

<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>Full Slider - Start Bootstrap Template</title>

<!-- jQuery -->
<script src="js/jquery.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
  <!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Modernizer -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<!-- Focuspoint -->
<script type="text/javascript" src="js/jquery.focuspoint.js"></script>

<link rel="stylesheet" href="css/focuspoint.css">
<!-- bx slider -->
<script src="js/plugins/jquery.fitvids.js"></script>
<script src="js/jquery.bxslider.js"></script>
<link href="css/jquery.bxslider.css" rel="stylesheet">

<script type="text/javascript">
  //<![CDATA[ 

    (function($) {
      $(document).ready(function() {

        //Fire plugin
        $('.focuspoint').focusPoint();
        $('.bxslider').bxSlider({
          video: true,
          useCSS: false,
          controls: true
        });
      });
    }(jQuery));


  //]]>
</script>

<style type="text/css">
    .navbar.transparent.navbar-inverse .navbar-inner {
       background: rgba(0,0,0,0.4);
       font-color: #000;
    }

    .navbar-nav > li{
      margin-left:-10px;
      margin-right:-10px;

    }

    .icon-bar {
       background-color:#FFF !important;
    }

    .nav>li>a:focus, .nav>li>a:hover {
      text-decoration: underline;
      color: #FFC;
    }

    .nav>li>a:focus, .nav>li>a:hover {
      background-color: transparent;
    }

    body
    {
        background-image: url(Images/Dust_Background.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-color: black;
        background-attachment: fixed;
    }

    .bg
    {
      width: 100%;
      z-index: 0;
    }

    a {
        color: #FFC;
        text-decoration: none;
    }

    a.pull-left {
      width: 25%;
      margin-top: 10px;
    }

    .navbar-collapse{
      border-top:0px !important;
      box-shadow:none;
    }

    body,td,th {
      font-family: "Tw Cen MT", Helvetica, "MS Reference Sans Serif";
      font-size: 16px;
      color: #FFF;
    }
    a:link {
      text-decoration: none;
      color: #FFF;
    }
    a:visited {
      text-decoration: none;
      color: #FFF;
    }
    a:hover {
      text-decoration: none;
      color: #FFC;
    }
    a:active {
      text-decoration: none;
    }

    @media (max-width: @screen-xs) {
        body{font-size: 10px;}
    }

    @media (max-width: @screen-sm) {
        body{font-size: 14px;}
    }

    #style_text {
        text-align: justify;
        letter-spacing: .8px;
        font-weight: 100;
    }

    #style_text p {
        padding: 10px;
    }

    .img-responsive {
      display: block;
      max-width: 100%;
      height: auto;
    }

    .bx-wrapper .bx-viewport {
      border: none;
      -webkit-box-shadow: none;
      background: transparent;
    }

    .bx-wrapper .bx-pager.bx-default-pager a {
      background: rgba(255, 255, 255, 0.25)
    }

    .bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {
      background: rgba(255, 255, 255, 0.65);
    }

    .bx-wrapper .bx-loading {
      background: black;
    }

  </style>

  <body>

      <!-- Navigation -->
    <nav class="navbar navbar-transparent navbar-static-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <div class="test">
        <a href="index_vs3.html" class="pull-left"><img src="Images/kairos_logo.png" style="
      width: 250%;"></a> 
        </div>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="film_vs7.html">THE FILM</a></li>
          <li><a href="screenings.html">SCREENINGS</a></li>
          <li><a href="contact_vs3.html">CONTACT</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <ul class="bxslider">
    <li>
      <iframe src="http://player.vimeo.com/video/131032179" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
    </li>
    <li><img src="Images/EbelKitchen.jpg" /></li>
    <li><img src="Images/LightningHole.jpg" /></li>
    <li><img src="Images/CharlesAlex.jpg" /></li>
    <li><img src="Images/Edna_JoeysRoom.jpg" /></li>
    <li><img src="Images/neoncross.jpg"/></li>
    <li><img src="Images/overpass.jpg"/></li>
    <li><img src="Images/TJRosieTrainWalk.jpg" /></li>
  </ul>


  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-l">
        <div id="style_text">
          <p>
          Through a series of collective dreams an other worldly being invades the characters' dream spaces, revealing their carnivorous desires and subconscious underbellies. Relationships intertwine in unusual and fantastical landscapes as television monitors, radio frequencies, orifices and dreams all become portals to access this alternate dimension of carnality and desire.</p>
          <p>
          The characters are forced to ask what is self? What is other? What must we give up to become something else?</p>
        </div>
      </div>
    </div>
  </div>

  </body>
</html>

Answer 1

看起来您需要为图像添加高度/宽度，否则它们将以各自的尺寸显示。

boostrap旋转木马不同大小

1 个答案: