时间戳

首页 > 解决方案 > 如何降低高度并同时使其在 Bootstrap 4 中响应

html - 如何降低高度并同时使其在 Bootstrap 4 中响应

问题描述

我想降低图像高度，使其占据屏幕的 75%。我尝试使用 height: 75%; 和 class="h-75" 但这似乎不起作用。现在我有 class="h-800" 然后 h-800 { height: 800px; 但这并不能使其响应。

我想要的一个很好的例子：https ://heydays.no/

这是我的 HTML：

  <div id="" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause="false">
    <div class="carousel-inner">
      <div class="carousel-item active">
          <img src="https://images.pexels.com/photos/1779487/pexels-photo-1779487.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="h-800" alt="...">
      </div>
      <div class="carousel-item">
        <img src="https://images.pexels.com/photos/1999463/pexels-photo-1999463.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" class="h-800" alt="...">
      </div>
    </div>
  </div>

和 CSS：

  img {
    height: 75%;
    object-fit: cover;
    width: 100%;
}

.h-800 {
    height: 800px;
}

标签： htmlcssbootstrap-4

解决方案

您可以使用视口高度。

在这个例子中，我正在创建一个类.h75

.h75{
     height: 75vh;
}

推荐阅读