ResponsiveSlides.js Stretching Bild

Question

Also im Grunde verwende ich ResponsiveSlides.js, um ein Banner auf einer Website zu haben, die ich erstelle. Ich möchte die Höhe auf eine Mindesthöhe beschränken, damit das Banner auf mobilen Geräten eine anständige Größe hat. Wenn Sie jedoch eine Mindesthöhe einstellen, wird das Bild nach innen gequetscht.

In Bezug auf die offensichtliche Antwort der Einstellung der Bilder zu ändern über Hintergrund-Bild CSS ist dies nicht ohne Bearbeiten der Funktion ResponsiveSlides.js erreichbar. Dies ist in meinen Augen eine häufige Frage, die Leute, die ResponsiveSlides verwenden, haben könnten, so dass alle Antworten wertvoll wären!

Bitte beachten Sie die PHP in dem HTML-Code zieht nur in den Bildern und Text und überprüft, um sicherzustellen, dass diese bevölkert Ich weiß, es ist 0 Probleme mit PHP seine nur eine Styling Ausgabe :)

den Code unten ansehen:

HTML

<div class="banner"> 
    <ul class="rslides"> 
     <?php if(have_rows('homepage_banner')): ?> 
      <?php while(have_rows('homepage_banner')): the_row(); ?> 
       <?php $image = get_sub_field('homepage_banner_image'); 
       if(!empty($image)): ?> 
       <li><img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>"></li> 
       <?php endif; ?> 
      <?php endwhile; ?> 
     <?php endif; ?> 
    </ul> 

    <div> 
     <span><?php the_field('homepage_banner_header'); ?></span> 
     <p><?php the_field('homepage_banner_sub_text'); ?></p> 
     <a title="<?php the_field('homepage_banner_button_text'); ?>" href="<?php the_field('homepage_banner_button_link'); ?>" class="button" id="toggle-availability-banner"><?php the_field('homepage_banner_button_text'); ?></a> 
    </div> 
</div> 

SCSS

.banner { 
position: relative; 
overflow: hidden; 
width: 100%; 
padding: 0; 
margin: 0; 
padding-bottom: 10px; 

.rslides { 
    position: relative; 
    list-style: none; 
    overflow: hidden; 
    width: 100%; 
    padding: 0; 
    margin: 0; 

    li { 
     -webkit-backface-visibility: hidden; 
     position: absolute; 
     display: none; 
     width: 100%; 
     left: 0; 
     top: 0; 

     &:first-child { 
      position: relative; 
      display: block; 
      float: left; 
     } 
    } 

    img { 
     display: block; 
     height: auto; 
     float: left; 
     width: 100%; 
     border: 0; 
     min-height: 294px; 
    } 
} 

JS (ResponsiveSlides.js) http://responsiveslides.com/responsiveslides.js

Answer 1

Ich dachte, dies heraus nach einem erneuten Besuch es eine Woche später, es so einfach war, den Haltepunkt als Auffinden von dem das Bild begann aufgrund der minimalen Höhe zu strecken und den Code für die Änderung Breite und Höhe. Siehe unten:

img { 
     display: block; 
     height: auto; 
     float: left; 
     width: 100%; 
     border: 0; 
     min-height: 294px; 
     width: auto; 
     height: 294px; 

     @include bp(min-width, 763px) { 
      width: 100%; 
      height: auto; 
     } 
    } 

Das Include ist einfach ein Mixin für eine Medienabfrage. Wie Sie sehen können, habe ich die Werte der Breite und Höhe geändert, um sicherzustellen, dass sie normal funktioniert, nachdem sie den Unterbrechungspunkt erreicht haben, an dem es kein Problem gab. Mobile natürlich auch!