2016-10-25 1 views
0

사이트의 로컬 컴퓨터에서 작업하는 방식을 사용하고 있지만 다른 컴퓨터에서 볼 때 슬라이드 쇼의 이미지가 다른 크기로 축소됩니다. 그것은 내 컴퓨터에서 잘 작동하지만 내 로컬 환경에서 문제를 볼 수 없기 때문에 코드 문제를 해결하는 데 문제가 있습니다. 누구나 로컬 컴퓨터에서 볼 수없는 프런트 엔드 문제를 해결하는 방법에 대한 조언을 갖고 있습니까? 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> 

답변

0

이미지에 높이/너비를 추가해야하는 것처럼 보입니다. 그렇지 않으면 이미지가 각각의 크기로 표시됩니다.