如何使用 slick 创建响应式网站横幅

Question

我使用 HTML、CSS 和 slick 创建网站横幅。在桌面上它看起来不错，但在移动设备上它看起来很小，当我尝试增加图像的高度时，图像被拉伸并且图像的某些部分被剪切。怎么解决这个问题

 <section class="bannerarea">
        <div class="topbanner">
          <div><img src="/assets/img/banner/ayurvedhaproducts.jpg" /></div>
          <div><img src="/assets/img/banner/chlorophyl.jpg" /></div>
          <div><img src="/assets/img/banner/agroproducts.jpg" /></div>
        </div>
      </section>

.topbanner .cubeanimation {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
.topbanner .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.topbanner .slick-active {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-animation: cssAnimation 8s 1 ease-in-out forwards;
  animation: cssAnimation 8s 1 ease-in-out forwards;
}

Answer 1

为了使您的代码具有响应能力，我将使用带有背景图像的 div 元素，而不是实际的 img 标签。

<section class="bannerarea">
    <div class="topbanner">
        <div class="banner-image" style="background-image: url('/assets/img/banner/ayurvedhaproducts.jpg')"></div>
        <div class="banner-image" style="background-image: url('/assets/img/banner/chlorophyl.jpg')"></div>
        <div class="banner-image" style="background-image: url('/assets/img/banner/agroproducts.jpg')"></div>
    </div>
</section>

.banner-image {
    background-size: cover; /* This ensures the image covers the div without stretching */
    background-position: center; /* This will center the image inside the div */
    height: 300px; /* Initial height for desktop. Adjust this as per your need */
    width: 100%; /* To ensure the div takes full width */
}

/* Responsive CSS for mobile devices */
@media (max-width: 768px) {
    .banner-image {
        height: 150px; /* Adjust this height for mobile screens */
    }
}