Question

我使用光滑的轮播库来创建一个崇高的滑块，但是使用不同高度的图像并不会使图像在同一个底部对齐：

我的代码：

<html lang="en">

<head>
    <title>slick - the last carousel you'll ever need</title>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://kenwheeler.github.io/slick/slick/slick.js"></script>
    <link rel="stylesheet" type="text/css" href="http://kenwheeler.github.io/slick/slick/slick.css" />
</head>

<body>
    <div class="slider responsive">
        <div><img src="http://url/Public/Publications/856518/1916982/Images/Detail.jpg"></div>
        <div><img src="http://url/Public/Publications/101506/1917549/Images/Detail.jpg"></div>
        <div><img src="http://url/Public/Publications/678542/1917100/Images/Detail.jpg"></div>
        <div><img src="http://url/Public/Publications/1658142/1917547/Images/Detail.jpg"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/596057/1911177/Images/Detail.jpg"></div>
        <div><img src="http://url/Public/Publications/286869/1917506/Images/Detail.jpg"></div>
        <div><img src="http://url/Public/Publications/678542/1917100/Images/Detail.jpg"></div>
        <div><img src="http://url/Public/Publications/856518/1916982/Images/Detail.jpg"></div>
    </div>
</body>
<script type="text/javascript">
$(".responsive").not('.slick-initialized').slick({
    dots: false,
    infinite: true,
    speed: 500,
    arrows: false,
    slidesToShow: 5,
    slidesToScroll: 2,
    responsive: [{
        breakpoint: 1024,
        settings: {
            slidesToShow: 5,
            slidesToScroll: 3,
            infinite: true,
            arrows: false,
            dots: false
        }
    }, {
        breakpoint: 600,
        settings: {
            slidesToShow: 4,
            slidesToScroll: 2,
            arrows: false,
            dots: false,
            infinite: true
        }
    }, {
        breakpoint: 480,
        settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
            arrows: false,
            infinite: true,
            dots: false
        }
    }]
});
</script>

</html>

我不想使用媒体查询为每个屏幕分辨率设置高度值。好吗？

Answer 1

这是解决您问题的方法。我不会说它是最好的，但它能完成这项任务。所以你实际可以做的是用max-height的css规则分别引用每个图像。我指定每个图像应该有style ="max-height:300px;"，使它们达到相同的高度。以下是我更改代码的方式：

    <div class="slider responsive">
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/856518/1916982/Images/Detail.jpg"style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/101506/1917549/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/678542/1917100/Images/Detail.jpg"style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/1658142/1917547/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/596057/1911177/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/286869/1917506/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/678542/1917100/Images/Detail.jpg" style ="max-height:300px;"></div>
        <div><img src="http://cdn1.lekiosk.com/Public/Publications/856518/1916982/Images/Detail.jpg" style ="max-height:300px;"></div>
    </div>

这是一个带有Bootstrap的旋转木马滑块，其中所有图像的高度相同。随意查看：

Carousel Slider Bootstrap

它不是最优雅的解决方案，但它可以胜任。告诉我它是否适合你。

New Fiddle #2

Answer 2

您可以尝试在图片上设置max-height / height属性。或者，您可以创建2个单独的div：一个是图像行，一个是文本行。然后，文本行将对齐在一起，图像将对齐在一起。同步轮播：（这是光滑网站的一个例子）

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: false,
  fade: true,
  asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: true,
  centerMode: true,
  focusOnSelect: true
});

Answer 3

将所有图片对齐在同一行的另一种解决方案：

容器：display：flex; items：align-self：flex-end;

使用css（光滑的Carousel库）将图像滑块对齐在同一个底部

3 个答案: