Question

我正在开发一个在标题下方有幻灯片的网站。我想要相应地限制幻灯片的高度，这样如果它在一个屏幕分辨率上留下20-30％的视口，它将在另一个屏幕上执行相同的操作。目前我的CSS看起来像这样。

#slideshow-container {
    height: 70vh;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#slideshow-container img {
    height: auto;
    width: 100%;
}

图像相应缩放，我使用视口单元来完成我想要的。但是，视口单元并不具有跨浏览器兼容性，因此我正在寻找一种在所有浏览器中实现相同想法的方法。我更喜欢只使用CSS而不是JavaScript或jQuery。

Answer 1

由于我不知道您的标记，因此更难以提供帮助。我用以下几行CSS来做：

/*reset stuff so that body fits the entire viewport*/
html,
body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
}

#slideshow-container {
     height:70%;
     ...
}

这应该可以胜任。

但在我看来，没有理由不使用视口单元，因为它在大多数当前浏览器中都受支持：http://caniuse.com/viewport-units 唯一的问题应该是移动设备（当然还有IE）。

CSS使图像占据视口的一定百分比

1 个答案: