调整颜色框覆盖以适应 div 而不是屏幕宽度答案

【问题标题】：Resize colorbox overlay to fit into a div instead of the screen width调整颜色框覆盖以适应 div 而不是屏幕宽度
【发布时间】：2019-07-30 15:03:22
【问题描述】：

我正在尝试构建一个颜色框画廊，该画廊应该调整大小，在左侧留下一个固定宽度的列。我的列是 250px 宽度，所以我更改了 CSS 并尝试更改 Jquery 中的颜色框设置，但它只能部分工作。

这是我的测试站点：https://www.cesarecrova.it/wordpress02/ 颜色框以橙色背景开始。

我在 jquery.colorbox.js 中更改了这些行：

function setSize(size, dimension) {
    return Math.round((/%/.test(size) ? ((dimension === 'x' ? $window.width() : winheight()) / 100) : 1) * parseInt(size, 10));
}

进入：

function setSize(size, dimension) {
    return Math.round((/%/.test(size) ? ((dimension === 'x' ? ($window.width() - 250) : winheight()) / 100) : 1) * parseInt(size, 10));
}

“250”是列的固定宽度。

图片被调整到屏幕大小。我希望图片按比例调整为橙色 div。

N.B 在这个测试站点中，特别是当屏幕尺寸小于 800px 时会出现此问题；

我认为解决方案应该很简单，但我对 Jquery 和 JS 不熟练...... 提前谢谢你。

【问题讨论】：

标签： jquery colorbox

【解决方案1】：

解决了。

我将列宽设置为这个初始设置大小：

// Opens inital empty Colorbox prior to content being loaded.
            var initialWidth = setSize(settings.get('initialWidth' - 250), 'x');
            var initialHeight = setSize(settings.get('initialHeight'), 'y');
            var maxWidth = settings.get('maxWidth');
            var maxHeight = settings.get('maxHeight');

希望对您有所帮助..

【讨论】：