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

Question

我使用光滑滑块(http://kenwheeler.github.io/slick/)来显示各种大小的图像(包括肖像和风景图片)。图像显示为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>

我将滑块的可变宽度属性设置为true，并为每个div添加了一个自定义的slick-slide width类。

需要什么样的CSS才能进入平滑的幻灯片宽度？

是否可以仅使用CSS来调整div宽度，或者我是否需要任何javascript来控制div宽度。此外，高度需要固定，并由滑块决定(响应式)。因此，在上面的代码中，它将是景观、肖像、肖像、景观div。

Answer 1

要根据图像比例调整幻灯片的大小，您需要在幻灯片中使用适当的<img />标记(请注意下面示例中的标记)。使用..。

$('...').slick({
  // ...
  variableWidth: true
  centerMode: true, // optional
  // ...
});

如果您的图像还没有相同的高度，您可能希望将其与...

.slick-slide img { max-height: /*...*/ }

​

$(document).ready(function() {
  $('#agent-detail-slideshow').slick({
    infinite: true,
    speed: 300,
    slidesToShow: 1,
    centerMode: true,
    variableWidth: true
  });
})

.slick-slide {
  opacity: .1;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  outline: none;
}

.slick-current {
  opacity: 1;
}
.slideshow {
  overflow: hidden;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>


<div class="wrapper gallery-wrapper">
  <div class="container gallery-container">
    <div class="row">
      <div class="col-md-12 slideshow">
        <div class="agent-detail-slideshow" id="agent-detail-slideshow">
          <div class="item"><img src="https://unsplash.it/600/300" /></div>
          <div class="item"><img src="https://unsplash.it/800/300" /></div>
          <div class="item"><img src="https://unsplash.it/400/300" /></div>
          <div class="item"><img src="https://unsplash.it/200/300" /></div>
          <div class="item"><img src="https://unsplash.it/500/300" /></div>
        </div>
      </div>
    </div>
  </div>
</div>

​