javascript - 颜色框和图像调整大小

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>

这是 div 在颜色框中打开的 Javascripit 函数。

$(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 必须与 Image 一样大并且位于屏幕的中心。

Answer 1

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

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

Answer 2

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