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

【问题标题】：Slick Slider (+ ACF) all images same heightSlick Slider (+ ACF) 所有图像高度相同
【发布时间】：2021-02-17 15:06:03
【问题描述】：

我知道这个问题已经被问过很多次了，但他们都没有解决我的问题。我有一个光滑的滑块（使用 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

【问题讨论】：

标签： javascript html css slider slick.js

【解决方案1】：

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

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

【讨论】：

好的。现在是纵向和横向img的大小相同，这很好。但他们更喜欢肖像imgs的高度。如果您明白我的意思，我希望光滑的滑块具有首选的横向高度。