Colorbox和图像调整大小

Question

我有一个画廊，我希望用户用Colorbox打开图片。 （然后发送带有邮件的图片或打印它等。）

本网站必须动态编程，因为它也必须在IPad上工作。

现在到实际问题：

此div应显示在Colorbox中：

<div style = "display:none"> 
 <div id="inline" style="height:100%; width:auto"> 
    <img src="#" id="inline_img" style="max-height:90%; max-width:100%"/> 
    <div id="buttons">
        <button > test </button>
        <button > test1 </button>
        <button > test2 </button>
    </div>
 </div>
</div>

这是Javascripit函数，其中div在colorbox中打开。

$(function(){
  //$('.element a').colorbox({});
  $('.element a').click(function(){
      // Using a selector:
    $('#inline_img').attr('src',$(this).find("img").attr('src'));
    $.fn.colorbox({
        inline:true,
        href:"#inline",
        maxHeight:'90%',
        maxWidth:'90%'
        }); 
    return false;
  });
  $('.element a').colorbox({    
        onComplete : function() { 
        $(this).colorbox.resize(); 
        }    
    });

但Colorbox总是比Picture本身大得多。 Colorbox必须与图像一样大，位于屏幕中央。

Answer 1

我使用以下代码解决问题。

$('.colorBox').colorbox({
     scalePhotos: true,
     maxWidth: '100%'
});

Answer 2

这个结果对我有意义。你给了colorbox一个display：block元素没有定义宽度，并要求它估计大小，当然这将是可用宽度的100％。