flexslider mit fester Höhe, während das Bildseitenverhältnis mit Überlauf versteckt bleibt

Question

Schon seit Stunden gesucht. Ich möchte flexslider für eine Art Bannerrotator auf einer Seite. Ich habe es geschafft, eine feste Höhe für die Bilder zu bekommen. Die Breite der Bilder wird jedoch links und rechts auf die Browsergrenzen gestreckt. Ich glaube, was ich will, ist einige Kühe von "Überlauf: versteckt". Wenn browser_width> img_width: zeigt den Hintergrund links und rechts vom Bild an. Wenn browser_width < img_width: Schnitt von Teilen aus dem Bild auf der linken und rechten Seite. Alle Wege behalten das Seitenverhältnis bei.

Derzeit wird das Bild horizontal gestreckt/geschrumpft.

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

i eine Lösung gefunden, für einige weitere Stunden Nach der Suche.

Verwenden Sie kein img-Tag für das Bild. Verwenden Sie stattdessen ein div mit einem Hintergrundbild. Für Details siehe meine HTML und CSS.

Ein weiterer Vorteil, den ich für immer sperren konnte, ist, dass man jetzt leichter Inhalte auf den Folien platzieren kann.

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