オーバーフローで画像アスペクト比を維持しながら固定高さのフレックスライダー

Question

時間を検索中です。私はページ上の一種のバナー回転子のためにflexsliderをしたい。私は画像の高さを一定にすることができました。しかし、画像の幅はブラウザの左右に広がってしまいます。私は、私が望むのは、 "オーバーフロー：隠された"のキーンだと信じています。 browser_width> img_widthの場合：画像から背景を左右に表示します。 If 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-tagを使用しないでください。代わりに、背景イメージで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; 
}