Question

我正在为我的项目使用ResponsiveSlides。问题是在大屏幕上，幻灯片的高度是巨大的，我似乎无法调整它，因为如果我这样做，要么图像被削减或图像的高度收缩与不良的口粮。我在img上尝试了max-height，但它没有解决任何问题。我正在寻找类似背景尺寸的东西：封面;会实现。

我无法将其上传到jsfiddle，因为它不起作用，ResponsiveSlides没有CDN。

我该怎么办？

以下是截图：

全屏：https://www.dropbox.com/s/dpnjxr9rltspxre/Screenshot%202015-04-11%2016.03.49.png?dl=0

我希望它看起来像这样（大小的一半）： https://www.dropbox.com/s/7a8hmmp5txzoc7k/Screenshot%202015-04-11%2016.04.26.png?dl=0

在滑块内部制作div时也会出现问题，但是还有一段时间了。

CSS：

.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






.caption
    position absolute
    display block
    text-align center
    width 20%
    margin 15% auto 0 auto
    left 0
    right 0
    padding 40px 80px
    background-color rgba(0,0,0,0.3)

    p
        font-size 18px
        margin-bottom 60px
        font-weight 400

HTML：

<ul class="rslides">
    <li>
        <img src="http://hdwallpaperd.com/wp-content/uploads/city_of_love-wallpaper-5120x3200.jpg" alt="">
        <div class="caption">
            <h2>Bem Vindo à FGSM</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam tempora ex provident ab laboriosam consequuntur, alias.</p>
            <a href="" class="btn-cta">Sobre Nós</a>
        </div>
    </li>
    <li>
        <img src="http://hdwallpaperd.com/wp-content/uploads/city_of_love-wallpaper-5120x3200.jpg" alt="">

        <div class="caption">
            <h2>Bem Vindo à FGSM</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam tempora ex provident ab laboriosam consequuntur, alias.</p>
            <a href="" class="btn-cta">Sobre Nós</a>
        </div>

    </li>
    <li>
        <img src="http://hdwallpaperd.com/wp-content/uploads/city_of_love-wallpaper-5120x3200.jpg" alt="">
        <div class="caption">
            <h2>Bem Vindo à FGSM</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id quam tempora ex provident ab laboriosam consequuntur, alias.</p>
            <a href="" class="btn-cta">Sobre Nós</a>
        </div>
    </li>
</ul>

ResponsiveSlides固定高度，没有响应

0 个答案: