Bootstrap 3中的Fullcalendar缩略图类不与其他类一起调整大小

Question

我试图使用Fullcalendar将每周议程放在一排缩略图中，但调整大小似乎不一致。

1） 在我的工作监视器上，议程表以全屏宽度正确渲染，然后在屏幕变窄时更改为比相邻缩略图高，然后返回到正确的全屏渲染。在移动模拟中，行从水平配置切换到垂直配置时，它也能正确渲染。屏幕分辨率为1920x1080。

2） 在家中，议程最初以全宽渲染，使其比相邻缩略图高，然后随着水平维度的减小而保持较高，在移动模拟中正确渲染，然后在屏幕恢复为全宽时正确渲染。屏幕分辨率为1366x768。

相邻图像的基本尺寸为465x300。

相关代码位。调用日历的jQuery（在$(document).ready()部分中）。

$('#calendar-index').fullCalendar({
    defaultView: 'basicWeek',
    height: $("#imgSource").height(),
    width: $("#imgSource").width(),
    windowResize: function(view) {
        this.height() = $("#imgSource").height();
        this.width() = $('#imgSource').width();
    }
}); 

HTML部分：

<div class="row">
        <div class="col-md-4">
        <div class="thumbnail text-center"><div id="calendar-index"></div><a href="full_cal.html" class="btn btn-primary" role="button">Button Text</a></div>
        </div>
        <div class="col-md-4">
        <div class="thumbnail text-center"><img id="imgSource" src="image1.png"><a href="#" class="btn btn-primary" role="button">Button Text</a></div>
        </div>
        <div class="col-md-4">
        <div class="thumbnail text-center"><img src="image2.png"><a href="#" class="btn btn-primary" role="button">Button Text</a></div>
    </div>

我有一种感觉，将它连接到$("#imgSource").load()而不是$(document).ready()调用是可行的，但如果可能的话，我会避免使用不推荐使用的函数。

http://jsfiddle.net/sidhenimh/63e0h54o/

Answer 1

我找到了一个解决方案，以防其他人遇到类似的问题；它的工作并不完美，但它至少使水平缩放更加稳定。有一个名为"Datatables"的免费jQuery插件可以实现自动水平缩放。垂直缩放仍然不起作用，但无论显示器的分辨率/大小如何，表至少在最初都能正确显示。

Datatables插件