Jquery 任意滑块-使用不同大小的图像和标题

我使用的是任意滑块，无法以相同的大小显示图像。我用了5张不同尺寸的图片。它们也不会在视口中居中

我尝试过在html中将它们调整为相同的大小，并且在css中也改变了元素，但是我不知道最好的处理方法。我已经尝试了我能想到的一切，但我错过了一些东西。我还是一个编程新手，所以任何指导都将不胜感激

这是小提琴-

HTML:

---

我不是100%确定您想要什么，但在中，图像居中（未调整大小）：

HTML模板

<ul id="slider3">
    <li>
        <div>
            <a href="page1.asp">
                <img src="image1.jpg" alt="" width="400" height="250">
            </a>
            <div class="caption-bottom">Caption 1</div>
        </div>
    </li>
    ...
</ul>

剧本

showCaptions = function ($this) {
    $this.find('.caption-bottom')
        .show()
        .animate({
            bottom: 0,
            opacity: 1
        }, 400);
};
hideCaptions = function ($this) {
    $this.find('.caption-bottom')
        .stop()
        .animate({
            bottom: -50,
            opacity: 0
        }, 350, function () {
            $this.find('.caption-bottom').hide();
        });
};

$('#slider3')
    .anythingSlider()
    /* this code will make the caption appear when you hover over the panel
    remove the extra statements if you don't have captions in that location */
    .find('.panel')
    .find('div[class*=caption]').css({
        position: 'absolute'
    }).end()
    .hover(function () {
        showCaptions($(this))
    }, function () {
        hideCaptions($(this));
    });

// hide all captions initially
hideCaptions($('#slider3 .panel'));

---

更新：要调整窗口大小，请在整个滑块周围添加包装，设置其最大尺寸，然后包括

展开

和

aspectRatio

选项（）：

CSS

修改脚本

$('#slider3')
    .anythingSlider({
        expand: true,
        aspectRatio : 600/350
    })

---

非常感谢。这更接近我想要的。我希望图像无论大小都适合整个视口的尺寸。好的，我做了这些更改…添加了一个包装，并将“展开”更改为true，并给出了aspectRatio编号，但现在我的图像根本不显示。

/*
  centering css from here: 
  http://css-tricks.com/centering-in-the-unknown/
*/
 ul#slider3 div {
    text-align: center;
}
ul#slider3 div:before {
    content:'';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
ul#slider3 img {
    display: inline-block;
    vertical-align: middle;
}

showCaptions = function ($this) {
    $this.find('.caption-bottom')
        .show()
        .animate({
            bottom: 0,
            opacity: 1
        }, 400);
};
hideCaptions = function ($this) {
    $this.find('.caption-bottom')
        .stop()
        .animate({
            bottom: -50,
            opacity: 0
        }, 350, function () {
            $this.find('.caption-bottom').hide();
        });
};

$('#slider3')
    .anythingSlider()
    /* this code will make the caption appear when you hover over the panel
    remove the extra statements if you don't have captions in that location */
    .find('.panel')
    .find('div[class*=caption]').css({
        position: 'absolute'
    }).end()
    .hover(function () {
        showCaptions($(this))
    }, function () {
        hideCaptions($(this));
    });

// hide all captions initially
hideCaptions($('#slider3 .panel'));

.wrapper {
    width: 100%;
    height: 500px;
}

$('#slider3')
    .anythingSlider({
        expand: true,
        aspectRatio : 600/350
    })