Javascript 设置div相对于高度的宽度

我有一个div

#幻灯片

，图像的纵横比为2:1。所以，设置我正在使用jQuery的图像的高度：

注意：幻灯片Div相对于浏览器窗口是100%宽的。如果用户使浏览器窗口变小，它将变小

为了动态更改宽度，我使用setTimeout：

setInterval(slideWidth,1000);

这是我想要的。但我认为，通过每秒刷新功能

slidewidth

，我给网站带来了巨大的影响

这可以通过CSS3实现吗？还是使用jQuery/JS，对网站的影响更小

---

多谢各位。请随意评论新的方式/想法。

您应该使用jquerys.resize（）；这将添加一个等待容器调整大小的事件侦听器。 Ej:

---

有一种仅使用css的方法，使用伪元素和填充：

div {
    width: 100%;
    position: relative;
    background: red;
}

div:before {
    display: block;
    content: "";
    padding-top: 50%;
}

伪

填充顶部的组合可用于在纵横比之间变化

在这种情况下，
50%
填充相当于
2:1的纵横比

相反，仅在窗口调整大小：
$（窗口）。调整大小（滑动方向）为什么每秒钟刷新一次？您可以附加window.onresize事件。谢谢，这可以通过CSS实现吗？如果你有一些想法的话。嗨@tika，请检查我的答案，寻找一个Css专用的解决方案。如果你相信这是正确的答案，那么它可能会对你有用。请标记它，以便将来搜索。谢谢，这可以通过CSS实现吗？如果你有什么想法的话，这对我来说是不会触发的。但是，如果我将其更改为$（window）。调整大小（…）它可以工作。很抱歉，这是您应该附加到的窗口。我的错误。谢谢你指出这一点。我会修改我的答案。这可以通过css3和mediaqueries来实现。mediaqueries与此无关，因为这是一个流动的问题，没有响应性。。。
$(window).resize(function(){
  //do your logic here
});

div {
    width: 100%;
    position: relative;
    background: red;
}

div:before {
    display: block;
    content: "";
    padding-top: 50%;
}