Javascript 如何使我的幻灯片在缩小时保护其纵横比？

你好，我正在制作一个网站，在我的网站上有一个幻灯片。当我缩小我的浏览器时，它没有保护它的纵横比，它变得非常丑陋。我不能使用padding top=x%技术，因为在我的幻灯片中有图像，然后图像会被破坏。我试图用JavaScript实现height=width/2，但没有成功。有人知道我该怎么做吗

我提到的JavaScript代码

var slider_menu = document.getElementById('slider-menu');
var slider_menu_width = slider_menu.clientWidth;
slider_menu.clientHeight = slider_menu_width / 2;

---

JSFIDDLE:

是否可以尝试调整监听器的大小，并动态更新滑块的大小

window.addEventListener("resize", () => {
  // Your code here
})