Question

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

关于通过background-image 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

经过一段时间的重新审视后，我想到了这一点，就像找到图像开始拉伸的断点一样简单，因为最小高度并改变了宽度和高度的代码。见下文：

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拉伸图像

1 个答案: