如何根据浏览器窗口的宽高比获得动态流畅的图像？

Question

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

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

但！

对于高度大于宽度的屏幕（智能手机、iPad 等），图像会从侧面被剪切。我不想这样，所以我有一个临时解决方案，当浏览器屏幕最大宽度为 1024 时，让媒体查询将高度分配给 auto，将宽度分配给 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>

这是我的 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：

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

我如何做到这一点，当浏览器窗口的高度大于宽度（例如 720x1024）时，图像会按宽度进行调整，而当浏览器窗口的高度大于宽度时，图像会按宽度进行调整宽大于高（例如 1024x720），图像会像现在一样进行调整（通过 JS 根据高度进行调整）。 这有可能吗？是否有一个简单的 CSS 解决方案，或者我需要用 JS 来解决更多问题？

提前致谢！

Answer 1

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

示例

CSS

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

JavaScript

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

Answer 2

我建议首先在 javascript 中获取纵横比。使用window.innerHeight和windows.innerWidth，并进行必要的划分。然后，将此作为一个条件。当屏幕宽度大于高度时，将css中的图片设置为width: 100%。否则，设置高度：100%。