真的很困惑如何为我的旋转木马设置高度和宽度的百分比

Question

我试图将轮播的宽度设置为占屏幕宽度的 100%，而高度占屏幕顶部的 35%。我已经尝试过多次尝试将 % 与高度一起使用，但它就是行不通。

这是我的css：

html,body{
    height: 100%; width: 100%; margin: 0;
}

.carousel-slide, .carousel-image, .carousel-inner{
    height: 35%;
    width: 100%;
}

/*carousel-image is the class for the images placed in the carousel*/

我不想使用 px 或 em 的原因是因为我希望轮播占据屏幕的 35%，而不管网站正在使用什么设备（桌面浏览器，ipad，智能手机...)

提前致谢。

Answer 1

尝试使用 35 视口高度和 100 视口宽度，看看是否可行。

.carousel-slide, .carousel-image, .carousel-inner{
    height: 35vh;
    width: 100vw;
}