flexslider与固定高度，同时保持图像纵横比与溢出隐藏

Question

已经搜索了几个小时。我想要一个页面上的横幅旋转器flexslider。我设法得到了图像的固定高度。但图像的宽度被拉伸到浏览器的左右边界。我相信我想要的是一些“溢出：隐藏的”。如果browser_width> img_width：从图像左右显示背景。如果browser_width < img_width：从左侧和右侧的图像中剪下部件。所有的方式保持宽高比。

当前图像水平拉伸/收缩。

HTML

<div class="flexslider"> 
    <ul class="slides"> 
     <li> 
      <div class="flexslider_image"> 
       <img src="/images/alnwick-castle-92607.png" /> 
      </div> 
     </li> 
     <li> 
      <div class="flexslider_image"> 
       <img src="/images/server-90389.png" /> 
      </div> 
     </li> 

    </ul> 
</div> 

CSS

.slider_container { 
    margin-top: -120px; 
} 

.flexslider { 
    border: none !important; 
    box-shadow: none; 
    margin:0px; 
    padding: 0px; 
} 

.slides li { 
    background-position: center; 
    -webkit-backface-visibility: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.flexslider_image { 

} 

.flexslider_image img { 
    height: 500px; 
} 

Answer 1

寻找更多的几个小时，我发现一个解决方案之后。

不要对图像使用img标签。而是使用带背景图片的div。有关详细信息，请参阅我的html和css。

我锁定的另一个优点是，现在可以更轻松地在幻灯片上放置内容。

HTML

<div class="flexslider"> 
    <ul class="slides"> 
     <li> 
      <div class="flexslider_background" style="background: url('/images/server-90389.png') no-repeat center;"> 
       <div class="flexslider_content"> 
        <p> 
         Hallo Test 2 
        </p> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="flexslider_background" style="background: url('/images/minecraft-938604.png') no-repeat center;"> 
       <div class="flexslider_content"> 
        <p> 
         Hallo Test 3 
        </p> 
       </div> 
      </div> 
     </li> 
     <li> 
      <div class="flexslider_background" style="background: url('/images/minecraft-669310.jpg') no-repeat center;"> 
       <div class="flexslider_content"> 
        <p> 
         Hallo Test 4 
        </p> 
       </div> 
      </div> 
     </li> 
    </ul> 
</div> 

CSS

.slider_container { 
    margin-top: -120px; 
} 

.flexslider { 
    border: none !important; 
    box-shadow: none !important; 
    margin:0px !important; 
    padding: 0px !important; 
    margin-bottom: 10px !important; 
    background-color: #eee !important; 
} 

.slides li { 
    background-position: center; 
    -webkit-backface-visibility: hidden; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

.flexslider_background { 
    height: 500px; 
    text-align: center; 
} 

.flexslider_content { 
    display: inline-block; 
    margin-top: 145px; 
    height: 350px; 
    width: 1000px; 
    border: 3px solid black; 
} 

.flexslider_content p { 
    float: left; 
    font-size: 2em; 
}