如何根据浏览器窗口纵横比获得动态流畅的图像？ [英] How do I get dynamically fluid images depending on browser window aspect ratio?

问题描述

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

This might not be a simple question, but I try my best.

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

I have this example site: http://lotvonen.tumblr.com/ I have a little piece of javascript that automatically calculates the height of the inner browser window and sets that number as image wrapper div's height. Height of the image inside the wrapper is 100% of the wrapper, so that I get nice, full screen images on all normal screen sizes. This works wonderfully on screens that are more wide than tall (desktops, laptops, etc).

但是！

屏幕高于宽屏（智能手机，iPad等），图像会从侧面剪裁。我不希望这样，所以我有一个临时解决方案，当浏览器屏幕最大宽度为1024时，媒体查询将高度指定为auto，宽度为100％，这样就不会发生剪裁。但这不是一个非常好的解决方案，并在某些决议中打破。它还会以较低的分辨率（例如800x600）破坏我的JS。

With screens that are more tall than wide (smartphones, iPads etc), the images get clipped from sides. I don't want that, so I have a temporary solution to have media query assigning height to auto and width to 100%, when browser screen max-width is 1024, so that no clipping occurs. But it's not a very good solution, and breaks at certain resolutions. It also destroys my JS with lower resolutions (eg. 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？

How do I get it so, that when the browser window is more tall than wide (eg. 720x1024), the images adjust by width, and when the browser window is more wide than tall (eg. 1024x720) the images adjust like they do now (by height, with the JS). Is this possible at all? Is there a simple CSS fix to this or do I need to mess more with JS?

提前致谢！

推荐答案

你也可以定期在javascript中获取方面，然后在body对象中添加一个类，指定它是4：3，宽屏还是肖像。然后在窗口改变大小的情况下使其间隔运行。

You could also get the aspect in javascript on a regular basis and then add a class to the body object that would specify if it was 4:3, widescreen, or portrait. Then make it run on an interval in case the window changes size.

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

JavaScript

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

这篇关于如何根据浏览器窗口纵横比获得动态流畅的图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！