Question

我正在我正在构建的网站上实现一个jQuery Fade Slider，虽然有一个明确的高度给了我一些问题。

我使用百分比定义的列各自的宽度，col-25 =宽度的25％。我的图像放在一个名为.img-holder的类中，其宽度设置为100％。截至目前，当使用淡入淡出滑块时，我的屏幕上的图像高度在宽度和高度上都很好，但是当缩小到较小的屏幕时，定义的高度显然会成为问题，因为我在图像和段落文本上有左/右箭头导航下面。我不希望通过我的css中的@media查询为每个屏幕变体使用不同的定义高度。有没有办法使用滑块而不必为它定义高度？

我的CSS目前看起来像这样：

.img-holder { background: #EEE; overflow:auto; position:relative; width:100%}
.col { float:left }
.col .img-holder { width:100%; height:auto; margin-bottom:14px; margin-top:5px }

.fades-demo { position:relative; width:100%; height: 100% !important; margin-left:auto; margin-right:auto; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; }

我的标记：

<div class="col col-50">
<div class="img-holder">
    <div class="mgtb fades-demo hide" id="fades1">

        <div>
        <img src="/001.jpg" width="" height="" alt="" class="" />
        </div>

        <div>
        <img src="/002.jpg" width="" height="" alt="" class="" />
        </div>

        <div>
        <img src="/003.jpg" width="" height="" alt="" class="" />
        </div>

    </div>

</div>
</div>

JS

<script>
//scripts
$(document).ready(function() {


//initUI
initUI()

//init slider 1
var defaults = {
    speed: 800
    ,timer: 4000
    ,autoSlider: false
    ,hasNav: true
    ,pauseOnHover: true
    ,navLeftTxt: ''
    ,navRightTxt: ''
    ,zIndex:20
}
,as = $('#fades1').fadeSlider(defaults)
,count = 2

//destroy
$('#o-btn-des').click(function() {
    as.destroy()
})

//resize wrapper
$('#o-btn-cs').click(function() {
    $('#fades1').css({
        position:'fixed'
        ,left:0
        ,top:0
        ,width:'100%'
        ,height:'100%'
        ,'z-index': 300
    })
    as.defs.speed = 1000
})

//resize wrapper
$('#o-btn-ns').click(function() {
    var t = '<div class="fades-demo mgtb" id="fades' + ++count +'">' +
    ($('#fades1 .fade-slides').length?$('#fades1 .fade-slides').html():$('#fades1').html()) +
    '</div>'
    $('#wrapper').append(t)
    $('#fades' + count).fadeSlider(defaults)
})
})

</script>

Answer 1

我认为：

.fades-demo { height: auto !important; }
.fades-demo img { max-width: 100%; width: 100%; height: auto; }

会工作得很好。当然，这假设您使用的滑块不会通过浮动/定位从正常流中移除所有图像，这会导致容器自身崩溃。如果图像的纵横比是恒定的并且您事先知道它，那么有许多解决方案。或者将图像隐藏在可见的容器中：隐藏只是为了保持正确的宽高比是另一种解决方案。如果不知道您使用的是哪个推子/滑块，就很难为您提供更多帮助。如果以上操作不起作用，请尝试设置jsFiddle。

Answer 2

虽然答案似乎为时已晚。面对此问题的其他人可能想尝试我创建的jquery-fade-slider插件。

可以在http://jqueryfadeslider.com访问文档，可以在http://jqueryfadeslider.com/demo

查看演示

jQuery Fade Slider - 删除定义的高度？

2 个答案: