3

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

我有这个示例站点： 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？

提前致谢！

4

2 回答 2

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);
于 2012-01-24T00:30:53.467 回答
1

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

于 2012-01-23T22:56:06.290 回答