0

当用户首次访问页面（使用 cookie）时，我使用颜色框打开。该框包含 520x520 图像。我的CSS如下：

#hunger-count{
padding: 5px;
overflow: hidden;
}

#hunger-count img{
width: 100%;
height: auto;
}

函数调用：

if (visited == null) {
        $.cookie('visited', 'yes'); 
        $.colorbox.settings.height = 560;
        $.colorbox.settings.width = 520;
        $.colorbox({html:"<div>...</div>"});
}

我希望它们是 maxWidth 和 maxHeight，并将宽度设置为屏幕的 80% 左右。这里的问题是，根据我设置的高度百分比，图像在不同设备上的倾斜很有趣。我有一部华为安卓手机，当我在手机上设置好的高宽比时，在 iPhone 上看起来很有趣，反之亦然。设置 80% 的宽度和自动高度得到了相同的结果。

关于我如何做到这一点的任何建议？

4

3 回答 3

2

Why you don't use:

$.colorbox({html:"<div>...</div>", width: '100%' });

to fit screen?

于 2012-10-26T15:15:36.730 回答
0

您可以设置颜色框参数

innerWidth:'80%', innerHeight:'80%'

如果您使用 colorbox 作为 iframe。

于 2014-04-23T11:25:39.650 回答
0

我开发了一个小东西，可以让我的 iFrame 保持 16/9 比例的彩盒视频。我从Find the exact height and width of the viewport in a cross-browser way (no Prototype/jQuery)中获取了一个函数来获取视口尺寸并使用它们来计算我的颜色框尺寸。我选择只在页面加载而不是页面调整大小时进行此计算。如果您不希望它的宽度大于 520px，那么可能会出现这样一种情况，如果视口比 520 宽，则为 520 宽度，如果小于 520，则为视口宽度的 80%，然后将高度设为相同的。查看下面的代码示例：

function getViewport() {
    var viewPortWidth;
    var viewPortHeight;
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
    if (typeof window.innerWidth != 'undefined') {
      viewPortWidth = window.innerWidth,
      viewPortHeight = window.innerHeight
    }
    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
    else if (typeof document.documentElement != 'undefined'
    && typeof document.documentElement.clientWidth !=
    'undefined' && document.documentElement.clientWidth != 0) {
        viewPortWidth = document.documentElement.clientWidth,
        viewPortHeight = document.documentElement.clientHeight
    }
    // older versions of IE
    else {
        viewPortWidth = document.getElementsByTagName('body')[0].clientWidth,
        viewPortHeight = document.getElementsByTagName('body')[0].clientHeight
    }
    return [viewPortWidth, viewPortHeight];
}    
var viewPortDim = getViewport();
var viewPortWidth = viewPortDim[0];
var viewPortHeight = viewPortDim[1];

//colorbox init
var colorboxWidth = 520;
if (viewPortWidth < 520) {
    colorboxWidth = viewPortWidth * 0.8;
}
//now initialize colorbox in your square ratio (your image is 520x520)
$('a.lightboxVid').colorbox({
    iframe: true, 
    innerWidth: colorboxWidth, 
    innerHeight: colorboxWidth
});
于 2014-10-14T14:00:54.097 回答