根据窗口大小和纵横比缩放图像
Posted
技术标签:
【中文标题】根据窗口大小和纵横比缩放图像【英文标题】:Scaling an image with respect to window size and aspect ratio 【发布时间】:2013-07-28 13:59:33 【问题描述】:我将 ID 为 home 的部分的背景设置为图像。图像的纵横比为 1.5。我编写了一些非常基本的 javascript 来确保在更改窗口大小时,该部分会根据图像的纵横比进行缩放。在该部分中,我在带有类容器的 div 中有内容。该内容具有一定的垂直高度。我编写的基本 javascript 不允许该部分的高度小于内容的高度。因此,此时该部分停止随窗口大小缩放。我遇到的问题是,当您将窗口缩放超过该点然后返回时,该部分不会按比例放大。
我创建了一个提琴手来帮助解释。 http://jsfiddle.net/Chadimoglou/Bpryg/ 我建议在移动模式下测试它。要重新创建我正在做的事情,请让窗口全屏显示。抓住一个底角并稍微调整大小以查看背景与纵横比的大小。然后调整大小,使其小于红色内容框的高度和宽度。之后,再次拉出,您应该会看到我遇到的问题。下面是我的 javascript 的 sn-p。
$(document).ready(function()
var theWindow = $(window),
aspectRatio = 1920 / 1280;
function resizeBg()
$("#home").width(theWindow.width);
if( ( $("#home").width()/aspectRatio ) < $("#home > .container").height() )
$("#home").width( $("#home > .container").height()*aspectRatio );
$("#home").height($("#home").width()/aspectRatio);
theWindow.resize(resizeBg);
window.onload=resizeBg();
);
在此先感谢您的帮助。
【问题讨论】:
【参考方案1】:http://jsfiddle.net/Bpryg/3/
$(function()
var $w = $(window),
$h = $('#home'), // CACHE YOUR SELECTORS
aspectRatio = 1920 / 1280;
function resizeBg()
$h.width($w.width()); // YOUR ERROR ( should be width() )
if( ( $h.width()/aspectRatio ) <= $("> .container", $h).height() )
$h.width( $(" > .container", $h).height()*aspectRatio );
$h.height( $h.width()/aspectRatio);
$w.resize(resizeBg);
$w.onload=resizeBg();
);
【讨论】:
【参考方案2】:我不是一个优秀的 JS 编码器,但符合逻辑:
要保持纵横比,您可以使用 JS 修改 CSS:How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?
要知道是否应该将高度或宽度设置为自动,您需要知道屏幕尺寸是大于您的图像还是高于您的纵横比。只需比较两个纵横比,您就会知道哪个是自动的。像这样,您的图像永远不会在您的背景上留下未填充的部分,并且会扩展到它的全宽或全高,具体取决于客户端纵横比和您的图像纵横比。
你可以使用:
document.documentElement.clientWidth
和
document.documentElement.clientHeight
获取客户端窗口大小并计算纵横比。
【讨论】:
以上是关于根据窗口大小和纵横比缩放图像的主要内容,如果未能解决你的问题,请参考以下文章