Slick Slider (+ ACF) 所有图像高度相同

如何解决Slick Slider (+ ACF) 所有图像高度相同

我知道这个问题已经被问过很多次了，但没有一个能解决我的问题。我有一个光滑的滑块（使用 ACF pro），我只希望我的所有图像具有相同的高度（这意味着：所有纵向 img 与横向 img 具有相同的高度（并更改其宽度）。

这是我当前的代码： HTML

<section>
  <div>
    <?PHP $images = get_field('portfolio_images'); ?>
    <?PHP if( $images ): ?>
      <div class="multiple-items">
        <?PHP foreach( $images as $image ): ?>
          <img src="<?PHP echo $image['url']; ?>" />
        <?PHP endforeach; ?>
      </div>
    <?PHP endif; ?>
  </div>

  <div class="text-container">
    <a>test</a>
  </div>
</section>

CSS

section {
  width: 80%;
  height: auto;
}

.slick-slide {
    width: 50vw;
    height: 50%;
    Box-sizing: border-Box;
}

  <script>
  jQuery(document).ready(function($){
    $('.multiple-items').slick({
      variableWidth: true,centerMode: true,slidesToShow: 1,slidesToScroll: 1,});
  });
  </script>

如 Slick 网站给出的示例：

enter image description here

解决方法

您可以创建新的 CSS 类规则，如：

.multiple-items img{
height:100vw;
max-height:100vw !important;
width:auto;
}