css - CSS 让图片占据一定比例的视口

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）。