Question

我想将轮播的最小高度设置为变化的图像尺寸。注意：当窗口缩小时，图像会随着高度减小。

我尝试使用Java脚本将轮播的高度设置为等于图像的高度。但是问题是，所有窗口尺寸的高度都是恒定的。我没有发现的是根据响应度为高度提供动态值。

我在做什么似乎很傻，但是我遇到了一个问题。问题是滑块传送带需要花费时间，这会导致较低的组件占据滑块的位置，从而一目了然。这破坏了我网站的外观。为了解决该特定问题，我考虑将滑块旋转木马的最小高度设置为一定的高度。这样做会破坏响应能力，因为在较低的屏幕中，滑块下方会产生额外的空间。因此，唯一的解决方案是根据窗口大小将滑块的最小高度设置为变化的图像高度。我可能会非常感谢其他方法。

// Js
const sliderImage = document.querySelector(".slider-image");
const slider = document.querySelector(".carousel");
slider.style.minHeight = sliderImage.height + "px";

// HTML
<div id="carouselExampleControls" class="carousel slide placeholder" data- 
ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="{{url('image/slider/slider02.jpg')}}" 
      class="slider-image d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="{{url('image/slider/slider01.jpg')}}" class="d-block w- 
      100" 
      alt="...">
    </div>
    <div class="carousel-item">
      <img src="{{url('image/slider/slider03.jpg')}}" class="d-block w- 
      100" 
      alt="...">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 
  role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" 
  role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

// No css applied yet

Answer 1

根据评论，我想问您一个问题，即如何将图像容器的最小高度设置为与图像容器的高度相同。

应该更改您的JavaScript，以使它查找.carousel-item（即图像的容器）而不是.slider-image的高度：

const sliderContainer = document.querySelector(".carousel-item");
const slider = document.querySelector(".carousel");
slider.style.minHeight = sliderContainer.height + "px";

请注意，这假设页面上没有其他.carousel-item实例。如果可能是这种情况，则应使用ID（例如#carouselItem）而不是类名作为参考。

如何将滑块轮播的最小高度设置为等于图像的变化高度？

1 个答案: