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

난 적법 최소 높이로 1 주일 후에는 이미지 스트레치 시작한의 브레이크 포인트를 찾는 것처럼 간단 걸로 상기의 코드를 변경 한 후,이 알아 낸 너비와 높이. 아래를 참조하십시오 :

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

포함은 단순히 미디어 쿼리에 대한 믹스입니다. 보시다시피 문제가없는 중단 점에 도달 한 후 정상적으로 작동하는지 확인하기 위해 너비와 높이의 값을 변경했습니다. 모바일 물론 물론!