ResponsiveSlides.js Stretching Image

Question

So basically I am using ResponsiveSlides.js in order to have a banner on a website I am creating. I want to restrict the height to a min-height so that the banner is a decent size on mobile devices. However, when setting a min-height this causes the image to squish inwards.

In regards to the obvious answer of setting the images to change via background-image css this is not achievable without editing how ResponsiveSlides.js functions. This in my mind is a common question people using ResponsiveSlides may have so any answers would be valuable!

Please note the PHP in the html just pulls in the images and text and checks to make sure these are populated I know there is 0 issues with PHP its just a styling issue :)

See the below code:

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

score 0 · Accepted Answer · answered May 18 '17 at 13:37

I figured this out after a revisiting it a week later it was as simple as finding the breakpoint of which the image began to stretch due to the min height and altering the code for the width and the height. See the below:

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

The include is simply a mixin for a media query. As you can see I altered the values of the width and height in order to ensure it worked as normal after it had reached the break point where there wasn't an issue. Mobile first of course as well!

ResponsiveSlides.js Stretching Image

1 Answers1