图像纵横比在光滑滑块中不起作用

Question

我的 WordPress 网站中有一个光滑的滑块，在光滑的滑块上使用背景图像。

我需要将它们保持在设定的宽高比，我知道该怎么做并且通常效果很好，但事实证明它在光滑的滑块上很棘手。

当我将常用的纵横比 'padding-top' 添加到幻灯片时，它只会使 slide/image 变得很长：您可以在这里看到：https://codepen.io/pixelboutiqueuk-the-lessful/pen/zYrZJgQ?editors=0110

html:

<div class="feature-block" data-aos="fade" style="background-color:<?php echo $bg_color; ?>">
  <ul class="slider fancy-slider" id="feature-block-slider" data-aos="fade">
    <li class="slick-slide" data-aos="fade" style="background-image: url('https://images.unsplash.com/photo-1568819646610-2f8982dd0c71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1868&q=80');"><div class="overlay"></div></li>
        <li class="slick-slide" data-aos="fade" style="background-image: url('https://images.unsplash.com/photo-1586220778893-1fae18067543?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80');"><div class="overlay"></div></li>
  </ul>

  <div class="content-wrapper" data-aos="fade">
    <h2 class="title">Static content box</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt vel risus id ornare. Sed at posuere turpis. Sed eu convallis diam. Duis vitae lectus finibus, luctus ante in, elementum mauris. Duis nec diam luctus, tristique tortor vel, pellentesque sapien. Nulla tincidunt tempus felis, vehicula interdum mi eleifend a. Duis non ante porttitor, luctus ligula eu, cursus sapien. Mauris varius lobortis mi sit amet euismod. Integer id leo tempus velit accumsan tempor sed id lectus. Nulla imperdiet iaculis erat nec placerat. Vivamus tincidunt ipsum eu lorem vestibulum, euismod ultricies nunc congue.</p>
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

ul {
  list-style-type: none;
}

.feature-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 60px !important;
  padding-right: 60px !important;
}

ul#feature-block-slider {
  margin-right: 47px;
  width: 50%;
}

li.slick-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 56.25%;
}

.slick-arrow {
  font-size: 0;
  position: absolute;
  border: none;
  background-color: transparent;
  top: 0;
  z-index: 1;
}

jQuery:

jQuery(document).ready(function($) {
 $slideshow = $('.slider').slick({
    infinite: true,
    mobileFirst: true,
    vertical: false,
    fade: false,
    autoplay: true,
    autoplaySpeed: 5000,
    speed: 2000,
    dots: false,
    arrows: true,
    pauseOnHover: true,
    slidesPerRow: 1,
    slidesToShow: 1,
    slidesToScroll: 1,
    adaptiveHeight: false
  });
  
  $('.slider').click(function(e) {
       var pWidth = $(this).innerWidth();
       var pOffset = $(this).offset(); 
       var x = e.pageX - pOffset.left;
 
      if(pWidth/2 > x) {
        $slideshow.slick('slickNext');
      } else if(pWidth/2 < x) {
        $slideshow.slick('slickPrev');
      }
  });
  
    $('.slider').click(function(e) {
       var pWidth = $(this).innerWidth();
       var pOffset = $(this).offset(); 
       var x = e.pageX - pOffset.left;
 
      if(pWidth/2 > x) {
        $slideshow.slick('slickNext');
      } else if(pWidth/2 < x) {
        $slideshow.slick('slickPrev');
      }
  });
  
  $('.slider').on('mousemove', function(e){
       var pWidth = $(this).innerWidth();
       var pOffset = $(this).offset(); 
       var x = e.pageX - pOffset.left;
 
      if(pWidth/2 > x) {
        $('.slick-slide').css('cursor','url(https://i.ibb.co/qR2mDmM/slider-arrow-left.png), pointer');
      } else if(pWidth/2 < x) {
        $('.slick-slide').css('cursor','url(http://www.google.com/intl/en_ALL/mapfiles/closedhand.cur), pointer');
      }
  });
});

当我将 padding-top 添加到滑块本身时，这看起来大小合适，但随后幻灯片图像被推出视图（到底部）。

有人能帮忙吗？

谢谢

Answer 1

填充百分比由相对父级宽度定义，在本例中为 div.slick-track。
一个简单的解决方法是在其他地方应用填充：

li.slick-slide {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
li.slick-slide .overlay {
  padding-top: 56.25%;
}

图像纵横比在光滑滑块中不起作用

Image aspect ratio not working in slick slider

wordpress

slick.js

aspect-ratio