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

Read more here: ResponsiveSlides.js Stretching Image


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: