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; 
}