Question

如何根据浏览器的高度调整旋转木马的大小？

根据宽度调整大小，我能够在CSS中使其响应

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

但是为了让它对身高做出反应，我不知道我该怎么做。

有任何线索吗？

Answer 1

您可以使用css单位vh来使用屏幕高度。 100vh表示整个视口高度。 vh是动态的，因此在您更改屏幕尺寸时会发生变化。

以下是fiddle

的一个演示

.carousel .item {
    max-width: 100%; /*slider width*/
    max-height: 100vh; /*slider height*/
}

Answer 2

谢谢Sachin Kanungo。

我和Max有同样的问题。但对我来说，它适用于这些设置：

.carousel {
   height: 80vh; /*slider height equals to 80% of viewport height*/
   margin-bottom: 60px;
}
.carousel .item {
   min-width:100%;
   height:80vh; /*slider height equals to 80% of viewport height*/
   background-color: #777;
}
.carousel-inner > .item > img {
   position: absolute;
   top: 0;
   left: 0;
   min-width: 100%;
   height: 80vh; /*slider height equals to 80% of viewport height*/
}

注意：我正在使用bootstrap 3.3.6

响应式旋转木马根据浏览器高度

2 个答案: