Colorbox maxWidth，maxHeight 不起作用答案

【问题标题】：Colorbox maxWidth, maxHeight not workingColorbox maxWidth，maxHeight 不起作用
【发布时间】：2012-10-26 07:51:12
【问题描述】：

我在仅使用可用视口设置颜色框时遇到问题。一旦我设置了 maxHeight 或 maxWidth 属性，就不会显示任何图像。颜色框打开，但停留在“纺车”上。

function showImage(e) {
  $.colorbox({href:$(e.currentTarget).attr("src")}); } 

jQuery(document).ready(function () {
  $('.popout').on("click", showImage);
  $('.popout').colorbox({rel:'popout', maxWidth:'95%', maxHeight:'95%'}); });

<img class="popout" src="my.jpg" alt="" width="500" height="373" />

那么，我的代码有什么问题？或者我是否还需要设置其他属性才能使 maxWidth/height 正常工作？

【问题讨论】：

标签： colorbox

【解决方案1】：

听起来您正在导致 JS 错误（检查浏览器的开发控制台）。

但是，您的方法存在问题。试试这个：

jQuery(document).ready(function () {
    $('.popout').colorbox({rel:'popout', maxWidth:'95%', maxHeight:'95%', href:function(){
        return this.src;
    }});
});

<img class="popout" src="my.jpg" alt="" width="500" height="373" />

【讨论】：

【解决方案2】：

虽然我知道这是一个老问题。我只是想为这个问题添加一个我认为有用的参考答案。

为了在颜色框上设置 maxWidth 或 maxHeight，还应该首先定义宽度和高度。 maxWidth 和 maxHeight 仅应设置为图像应加载的大小。

对于移动视口，我通常将我的函数设置如下，以确保颜色框永远不会为更大的屏幕加载大于 800 像素的图像。较小的屏幕以 90% 的宽度显示颜色框。

下面的代码示例只使用了 width 和 maxWidth 属性：

$(document).ready(function(){
    $(".popout").colorbox({rel:'popout', width:"90%", maxWidth:"800px"});
});

我希望这可以帮助任何仍然在这个问题上磕磕绊绊的人。

【讨论】：