【问题标题】：How do I get dynamically fluid images depending on browser window aspect ratio?如何根据浏览器窗口纵横比获得动态流体图像？
【发布时间】：2012-02-17 06:26:00
【问题描述】：

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

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

但是！

如果屏幕的高度大于宽度（智能手机、iPad 等），图像会从侧面被剪掉。我不希望这样，所以我有一个临时解决方案，当浏览器屏幕最大宽度为 1024 时，媒体查询将高度分配给自动，宽度分配给 100%，这样就不会发生剪辑。但这不是一个很好的解决方案，并且在某些分辨率下会中断。它还会以较低的分辨率（例如 800x600）破坏我的 JS。

这是 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？

提前致谢！

【问题讨论】：

标签： javascript resize aspect-ratio fluid-layout fluid-images

【解决方案1】：

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

【讨论】：

【解决方案2】：

您还可以定期在 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);

【讨论】：