Flexslider - 使用固定图像充电

Question

我正在使用Flexslider，但是当图像加载并且未执行该功能时，它会在另一个图像下方播放图像，生成巨大的滚动条，并在运行和加载图像后运行一般。

现在的问题是：在携带图像之前，没有办法将图像保持在同一个位置。不要生成这个巨大的滚动条。

下面的代码：

HTML：

<div class="sliderTrabalhe" ng-init="vm.sliderTrabalhe();"> 
    <ul class="slides"> 
     <li ng-repeat="s in vm.repeat(7) track by $index"> 
     <div class="image" style="background-image: url('app/template/img/slider.jpg');"></div> 
     </li> 
    </ul> 
    </div> 

功能：

vm.sliderTrabalhe = function() { 
    setTimeout(function() { 
     $('.sliderTrabalhe').flexslider({ 
     animation: "slide", 
     controlNav: true 
    }); 
    }, 1000); 
} 

CSS：

.sliderTrabalhe{ 
     position: relative; 
     margin-bottom: 70px; 
     @extend .largura_total; 
     height: 500px; 
     .image{ 
      height: 500px; 
     } 
     .flex-control-nav{ 
      bottom: -30px; 
      left: 50px; 
     } 
     .flex-control-paging li a{ 
      background: $cinza_escuro!important; 
     } 
     .flex-control-paging li a.flex-active{ 
      background: $vermelho!important; 
      width: 15px; 
      height: 15px; 
      padding-top: 2px; 
     } 
     .flex-control-nav li { 
      margin: 0 3px; 
     } 
    } 

更好地理解下面的图片：

前：

后：

Answer 1

CSS删除错误：

.sliderTrabalhe { 
    margin: 0; 
    padding: 0; 
} 
.sliderTrabalhe .slides > li { 
    display: none; 
    -webkit-backface-visibility: hidden; 
} 
.sliderTrabalhe .slides img { 
    width: 100%; 
    display: block; 
} 
.sliderTrabalhe .slides:after { 
    content: "\0020"; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
html[xmlns] .sliderTrabalhe .slides { 
    display: block; 
} 
* html .sliderTrabalhe .slides { 
    height: 1%; 
} 
.no-js .sliderTrabalhe .slides > li:first-child { 
    display: block; 
} 
.sliderTrabalhe { 
    position: relative; 
    zoom: 1; 
} 
.sliderTrabalhe .slides { 
    zoom: 1; 
} 
.sliderTrabalhe .slides img { 
    height: auto; 
    -moz-user-select: none; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-prev { 
    opacity: 0.7; 
    left: -20px; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-prev:hover { 
    opacity: 1; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-next { 
    opacity: 0.7; 
    right: -20px; 
} 
.sliderTrabalhe:hover .flex-direction-nav .flex-next:hover { 
    opacity: 1; 
} 

.sliderTrabalhe .flex-direction-nav a{ 
    width: 19px; 
    height: 32px; 
    margin: 0; 
} 

Answer 2

请上传此滑块的演示。你的尝试？ ：

.image 
{ 
    width:100%; 
    height:auto; 
} 

和风格：

background-size: cover;