javascript - 如何将 slider 轮播的最小高度设置为等于图像的不同高度？

Question

我想将旋转木马的最小高度设置为不同尺寸的图像。注意:当窗口缩小时，图像按高度缩小。

我尝试使用 java 脚本将 carousel 的高度设置为等于图像的高度。但问题是所有窗口大小的高度都是恒定的。我没有找到的是根据响应能力为高度提供动态值。

我所做的似乎有点傻，但我遇到了问题。问题是 slider 轮播需要时间加载，这会导致较低的组件占用 slider 的位置以供一瞥。这破坏了我网站的外观。为了解决这个特殊问题，我想到将 slider 轮播的最小高度设置为一定高度。这样做会破坏响应能力，因为在较低的屏幕中， slider 下方会产生额外的空间。因此，唯一的解决方案是根据窗口大小将 slider 的最小高度设置为不同的图像高度。可能还有其他方法，我非常感谢。

// 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)而不是类名作为引用。