实施例

Question

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

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

但是！

屏幕高于宽屏（智能手机，iPad等），图像会从侧面剪裁。我不希望这样，所以我有一个临时解决方案，当浏览器屏幕最大宽度为1024时，媒体查询将高度指定为auto，宽度为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？

提前致谢！

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%。否则，请设置height: 100%。

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

2 个答案:

实施例

CSS

的JavaScript