ResponsiveSlides.js 拉伸图像

Question

所以基本上我使用 ResponsiveSlides.js 是为了在我正在创建的网站上有一个横幅。我想将高度限制为最小高度，以便横幅在移动设备上的尺寸合适。但是，当设置最小高度时，这会导致图像向内挤压。

关于将图像设置为通过背景图像更改的明显答案 css 如果不编辑 ResponsiveSlides.js 的功能，这是无法实现的。在我看来，这是使用 ResponsiveSlides 的人可能会遇到的一个常见问题，因此任何答案都是有价值的！

请注意 PHP 中的 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

我在一周后重新访问它后发现了这一点，它就像找到图像由于最小高度而开始拉伸的断点并更改宽度和高度的代码一样简单。见下文：

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

include 只是媒体查询的 mixin。如您所见，我更改了宽度和高度的值，以确保它在到达没有问题的断点后正常工作。当然也是移动优先！

ResponsiveSlides.js 拉伸图像

ResponsiveSlides.js Stretching Image

javascript

wordpress

sass

responsive-slides

responsive