Javascript 如何根据浏览器窗口的纵横比动态获取流体图像？

这可能不是一个简单的问题，但我尽了最大努力

我有一个示例站点： 我有一小段javascript，它自动计算内部浏览器窗口的高度，并将该数字设置为image wrapper div的高度。包装内图像的高度是包装的100%，所以我可以在所有正常屏幕大小上获得漂亮的全屏图像。 这在宽于高的屏幕（台式机、笔记本电脑等）上非常有效

但是

对于高过宽的屏幕（智能手机、iPad等），图像会从侧面剪裁。我不想这样，所以我有一个临时解决方案，当浏览器屏幕最大宽度为1024时，让媒体查询将高度指定为“自动”，将宽度指定为100%，这样就不会发生剪辑。但这不是一个很好的解决方案，在某些决议上会出现分歧。它还会破坏分辨率较低的JS（例如800x600）

以下是JS：

<script type="text/javascript">
var elems = document.getElementsByClassName('img'),
size = elems.length;

for (var i = 0; i < size; i++) {

var img = elems[i];
var height = (window.innerHeight) ? window.innerHeight: document.documentElement.clientHeight;
img.style.height=(height)+'px';
}
</script>

下面是部门：

<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>

当浏览器窗口的高度大于宽度（例如720x1024）时，图像会按宽度进行调整；当浏览器窗口的宽度大于高度（例如1024x720）时，图像会像现在一样进行调整（根据高度，使用JS）。 这可能吗？是否有一个简单的CSS修复程序，或者我需要用JS来处理更多问题

---

提前谢谢

我建议首先在javascript中获取纵横比。使用

window.innerHeight

和

windows.innerWidth

，并进行必要的分割。然后，把这作为一个条件。当屏幕宽度超过其高度时，将css中的图像设置为

宽度：100%

。否则，设置

height:100%

您还可以定期在javascript中获取方面，然后向body对象添加一个类，该类将指定它是4:3、宽屏还是纵向。然后让它以一定的间隔运行，以防窗口大小发生变化

例子 CSS JavaScript

<li><div class="img"><img src="{PhotoURL-HighRes}" alt="{PhotoAlt}"/></div>

.43 img { width: auto; }
.widescreen img { width: 100%; }
.portrait img { height: 100%; }

var getAspect = function(){
    var h = window.innerHeight;
    var w = window.innerWidth;
    var aspect = w / h;

    var 43 = 4 / 3;
    var cssClass = "";

    if (aspect > 43) {
        cssClass = "widescreen";
    }
    else if (aspect === 43) {
        cssClass = "43";
    }
    else {
        cssClass = "portrait";
    }

    $("body").addClass(cssClass); // Using jQuery here, but it can be done without it
};

var checkAspect = setInterval(getAspect, 2000);