Javascript 颜色框和图像大小调整

我有一个图库，我想让用户打开一张带有颜色框的图片。（然后用邮件发送图片或打印图片等）

这个网站必须动态编程，因为它也必须在IPad上运行

现在谈谈实际问题：

此div应显示在颜色框中：

<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>

但是颜色盒总是比图片本身大得多。颜色框必须与图像一样大，并位于屏幕中央

---

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

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

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

---

对不起，我没有看整个屏幕。它不是可用宽度的100%。它就在屏幕的中央，宽度是随机的。

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