Javascript 保留图像与动态高度的关系（图像比率）

假设我有一个剧院（比如当你打开一张facebook图片时），当我修改窗口的高度时，我需要图像的宽度来保持这种关系（因此图像的高度，因为我根据窗口的高度设置了图像的高度）。如果我说得不够清楚，下面是小提琴的链接：，因为一个代码片段可以说出一千多个单词

Html:

JS（jQuery）根据窗口的高度更新高度

setInterval(function(){ 
$("#theater").height($(window).height()-40);}, 10)

---

在某些浏览器中，设置img的高度不会触发宽度的调整。相反，“最大宽度”和“最大高度”在此处会有所帮助：

#theater{
    position:fixed;
}
#theater img{
    max-width: 100%;
    max-height: 100%;
}

此外，您可能希望使用

$（窗口）。调整大小
，而不是每秒100次重置#剧院的大小：

function resizeTheater(){ 
  $("#theater").height($(window).height()-40);
}
$(window).resize(resizeTheater);
resizeTheater();

修订版JSFIDLE：

另外，请注意：为了使用正确的XHTML语法，img元素应该像下面这样关闭

实际问题是什么？你提供的小提琴似乎和你描述的一样好用。不。。。更改提琴的高度，图像将缩小…在提琴中：随着窗口高度缩小，图像高度缩小。随着图像高度缩小，图像宽度缩小以保持纵横比。您希望图像行为是什么？
#theater{
    position:fixed;
}
#theater img{
    max-width: 100%;
    max-height: 100%;
}

function resizeTheater(){ 
  $("#theater").height($(window).height()-40);
}
$(window).resize(resizeTheater);
resizeTheater();