Question

这是我关于stackoverflow的第一个问题。

我目前正在使用Slick carousel jQuery插件，它可以工作到目前为止我的工作。只剩下一个问题，我希望不同大小的图像水平和垂直居中，具体取决于它们的比例。我认为图像清楚地表达了我的意思。

提前致谢！

编辑：它不仅垂直于中心div，而且还使所有瓷砖的最大高度和宽度相同，并且仍保持响应性。

$(".regular").slick({
  dots: true,
  infinite: false,
  slidesToShow: 7,
  slidesToScroll: 6,
  responsive: [{
    breakpoint: 1200,
    settings: {
      slidesToShow: 5,
      slidesToScroll: 4
    }
  }, {
    breakpoint: 992,
    settings: {
      arrows: false,
      slidesToShow: 3,
      slidesToScroll: 2
    }
  }, {
    breakpoint: 768,
    settings: {
      arrows: false,
      slidesToShow: 1,
      slidesToScroll: 1
    }
  }]
});

   html,
   body {
     margin: 0;
     padding: 0;
   }
   
   * {
     box-sizing: border-box;
   }
   
   .slider {
     margin: 50px;
   }
   
   .slick-slide {
     margin: 0px 10px;
   }
   
   .slick-slide img {
     width: 100%;
   }
   
   .slick-prev:before,
   .slick-next:before {
     color: blue;
   }
   
   @media screen and (max-width: 768px) {
     .slick-dots {
       position: initial !important;
     }
   }

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

<section class="regular slider">
  <div>
    <img src="http://placehold.it/150x300?text=1">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/550x300?text=2">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=4">
    <p>text</p>
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=5">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=7">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=8">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=9">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=10">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=11">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=12">
  </div>
</section>

Answer 1

检查一下： https://jsfiddle.net/7pa8jq4a/5/

我曾经居中：

display: flex;
align-items: center;
justify-content: center;

我添加了包装器div来滑动和img style max-height和max-width;

Answer 2

以下是您的需求：

1）首先，设置section { text-align:center;}

2）将slick-track div设置为：

.slick-track{
  display: flex;
  align-items: center;
}

3）例如

 .slick-slide img {
    ..........
    max-width: 150px;
    max-height: 150px;
}

全部（来源：How to vertically center divs?）

Answer 3

我稍微调整了你的版本（如果你不想要flex-box）：

https://jsfiddle.net/fr74h8k5/2/

.slick-slide .image {

   height: 200px;
   width: 100%;
   margin: 0 auto;

   background-repeat: no-repeat;
   background-position: center; 
   background-size: contain;

}

Answer 4

我认为我正在寻找的是一个JS或jQuery脚本，可以比较两个图块，如果它们的大小与默认大小相同，那么所有其他图块都使用此大小作为最大宽度，如果它们的比例宽于如果它们的比率高于默认比率，则为默认比率或最大高度。这只是一个想法，我不知道它是否是最好的解决方案，甚至是可能的。这可以理解吗？它很糟糕我的JS和jQuery技能不足以自己尝试一些东西。

jQuery插件Slick Carousel图像对齐

4 个答案: