手机html如何获取宽高比,javascript-如何根据浏览器窗口的宽高比动态获取动态图像？...

这可能不是一个简单的问题,但我会尽力而为.

我有这个示例网站：http://lotvonen.tumblr.com/

我有一小段javascript,它可以自动计算内部浏览器窗口的高度,并将该数字设置为图像包装div的高度.包装器内图像的高度是包装器的100％,因此我可以在所有正常屏幕尺寸上获得漂亮的全屏图像.

这在比高大的屏幕(台式机,笔记本电脑等)上效果很好.

但！

使用比宽高的屏幕(智能手机,iPad等),图像会从侧面被剪掉.我不需要,因此我有一个临时解决方案,可以让媒体查询在浏览器屏幕的最大宽度为1024时将高度分配给auto并将宽度分配给100％,这样就不会发生剪切.但这不是一个很好的解决方案,并且在某些分辨率下无法使用.它还会以较低的分辨率(例如800×600)破坏我的JS.

这是JS：

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';

}

这是我的CSS：

.img {

max-width:100%

}

.img img {

width:auto;

}

.img img {

height:100%;

}

@media only screen and (max-width: 1024px) {

.img {

height:auto !important;

}

.img img {

height:auto !important;

max-width:100%;

}

这是div：

我如何获得它,当浏览器窗口的高度大于宽度(例如720×1024)时,图像会按宽度调整；当浏览器窗口的宽度大于高度(例如1024×720)时,图像会像调整图像一样调整现在(按高度,使用JS).

这有可能吗？是否有一个简单的CSS修复程序,还是我需要更多地使用JS？

提前致谢！