Bootstrap 3 Thumbnail 类中的 Fullcalendar 未与其他对象一起调整大小答案

【问题标题】：Fullcalendar in Bootstrap 3 Thumbnail class not resizing with otherBootstrap 3 Thumbnail 类中的 Fullcalendar 未与其他对象一起调整大小
【发布时间】：2014-09-29 13:00:59
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

我也尝试过使用 Fullcalendar 的内置 aspectRatio，但它也无法正确渲染尺寸。插入的行是aspectRatio = $("#imgSource").width/$("#imgSource").height - 但是，正如我所说，它没有正确呈现任何分辨率。
你能给我们一把小提琴吗？
@azeos jsfiddle.net/sidhenimh/63e0h54o

标签： twitter-bootstrap-3 resize fullcalendar thumbnails

【解决方案1】：

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

Datatables Plugin

【讨论】：