javascript - 如何在比原始尺寸更大的颜色框中显示图像？

Question

我在彩框弹出窗口中显示了 500x500 像素的图像(按链接中的类名分组)，我想显示比原始尺寸更大的图像(屏幕尺寸的 90% 就完美了)。

我找不到任何增加图像大小的解决方案，只能增加弹出窗口的大小。即使在更改加载图像的宽度和高度后调用的 $.colorbox.resize() 方法似乎也不起作用。

如果图像大于屏幕的 90%，则以下代码有效，但如果小于屏幕，则无效。

$('.photos').colorbox({rel:'photos', maxHeight:'90%', maxWidth:'90%', scalePhotos:true});

如果我添加 width:'90%',height:'90%'，只有颜色框采用正确的尺寸，但图像保持其原始尺寸 (500x500px)

有什么解决办法吗？

谢谢

Answer 1

我知道这是一个老问题，但我一直在寻找类似的东西并最终来到这里。

解决方案是添加到你的脚本

$('.photos').colorbox({rel:'photos', width:'90%'});

和你的CSS

img.cboxPhoto { width:100% !importatnt; }

通过 Firebug 或其他前端检查工具尝试。我不喜欢 !important 标签，但我不知道其他方法，因为 colorBox 将样式直接添加到元素而不是类。