1

我有一个自定义敲除绑定，允许将图像绑定到敲除弹出框：

ko.bindingHandlers.bootstrapPopover = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
        var options = valueAccessor();
        var defaultOptions = {trigger: 'hover'};
        options = $.extend(true, {}, defaultOptions, options);
        $(element).popover(options);
    }
};

我的目标是允许用户将鼠标悬停在缩略图上（定义了最大尺寸）以查看全尺寸图像，可能与屏幕允许的一样大（我认为引导程序的弹出窗口已经处理了响应性）。

我怎样才能获得出现在弹出窗口中的全尺寸图像？

小提琴：

http://jsfiddle.net/PTSkR/117/

html:

 <a class="image-content-saved" href="#" data-bind="bootstrapPopover: { content: sideOneTextContent(), html:true }">
                <img src="http://www.dailydesigninspiration.com/diverse/adv/publicis/Omax-Wide-Angle-Lenses.jpg" />
            </a>
4

1 回答 1

2

您的问题与淘汰赛或引导程序无关，而是与缩略图的样式有关：

img {
    max-height: 160px;
    height: 100% !important;
    max-width: 100% !important;
    margin-bottom: -5px;
}

所以你的选择器img太通用了，也被应用到弹出窗口中的图像。您可以通过为弹出框内的图像添加新规则来修复它。

Bootstrap 将类添加popover到弹出框的容器中，因此您可以编写如下内容：

.popover img {   
   max-height: none;
   max-width: none !important;
}

演示JSFiddle。

于 2013-06-05T04:54:15.073 回答