Javascript 根据背景图像纵横比和固定高度动态更改div大小

我使用slick slider（）来显示各种大小的图像（包括纵向和横向图片）。图像显示为div的背景图像属性

但是，滑块具有固定的开箱即用宽度/高度

我的要求是所有光滑的div都有一个固定的高度，但根据肖像或风景图片的不同宽度。在下面的代码中，图像2,3为纵向模式，1,4为横向模式

      <div class="wrapper gallery-wrapper">
    <div class="container-fluid gallery-container">
      <div class="row">
        <div class="col-md-12 slideshow">
          <div class="agent-detail-slideshow" id="agent-detail-slideshow">
            <div class="item slick-slide-width" data-image="assets/img/1.png" style="background-image:url('assets/img/1.png')"></div>
            <div class="item slick-slide-width" data-image="assets/img/2.png" style="background-image:url('assets/img/2.png')"></div>

            <div class="item slick-slide-width" data-image="assets/img/3.png" style="background-image:url('assets/img/3.png')"></div>
            <div class="item slick-slide-width" data-image="assets/img/4.png" style="background-image:url('assets/img/4.png')"></div>
          </div>
          <ul>
            <li class="next-carat white shadow"></li>
            <li class="prev-carat white shadow"></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

我将slider的variable width属性设置为true，并为每个div添加了一个自定义的slick slide width类

什么CSS需要进入光滑的幻灯片宽度

---

是否可以仅使用CSS来调整div宽度，或者是否需要任何javascript来控制div宽度。此外，高度需要固定，并由滑块决定（响应）。因此，在上述代码中应该是横向、纵向、纵向、横向div。

要根据图像比例调整幻灯片大小，您需要使用适当的

为了帮助社区再现您的案例，您能否在代码段而不是代码块中提供一个工作示例？谢谢我们如何知道哪幅图像是纵向的，哪幅是横向的？通过在div中添加img标签，效果非常好。代码的哪一部分实际导致div根据图像大小进行调整？@user972391，

部分。它被解读为“内容”。滑块使它们具有相等的

高度

s（除非您在slick选项中设置了

adaptiveHeight:true

，而您不应该这样做）。根据图像比率，按比例计算每张幻灯片的

宽度。如果将应用图像用作背景图像，则每个幻灯片的比例将从滑块中获取，并根据背景属性（
size
，
repeat
…）应用到合适的位置。感谢@Andrei的解释
.slick-slide img { max-height: /*...*/ }