提问者:小点点

滑块(+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;
}

JS

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

Slick网站给出的例子是:

在此输入图像说明


共1个答案

匿名用户

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