ResponsiveSlides.js画像を伸ばす

Question

基本的に私が作成しているウェブサイトにバナーを付けるためにResponsiveSlides.jsを使用しています。私はバナーがモバイルデバイス上でまともなサイズになるように高さを最小の高さに制限したいと思います。ただし、最小高さを設定すると、画像が内側に盛り上がってしまいます。

背景画像cssで画像を変更するという明白な答えに関しては、ResponsiveSlides.jsの機能を編集しなければ達成できません。これは私の心の中でResponsiveSlidesを使っている人々が持っているかもしれない共通の質問です。

HTMLでPHPがちょうどこれらは私がそのわずかなスタイリングの問題:)

は、以下のコードを参照してくださいPHPと0の問題が存在しているはず埋めされていることを確認するために、画像やテキストをチェックして引っ張る注意してください。

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

Iは起因分の高さには一週間後、それが画像を伸張し始めれたブレークポイントを見つけるのと同じくらい簡単であった再訪とするためのコードを変更した後にこれを考え出し幅と高さ。以下を参照してください：

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

ザ・は、単にメディアクエリのミックスインで含まれています。あなたが見ることができるように、問題がなかったブレークポイントに達した後、正常に機能するように、幅と高さの値を変更しました。モバイルはもちろん、もちろん！