通过击倒绑定*几乎*工作在bootstrap的popover中显示图像

Question

我有一个自定义的敲除绑定，允许图像绑定到敲击弹出窗口：

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

我的目标是允许用户将鼠标悬停在缩略图上（定义了最大尺寸）以查看完整尺寸的图片，可能与屏幕允许的一样大（我认为bootstrap的popover已经负责响应 - 岬）。

如何在弹出框中显示完整尺寸的图像？

小提琴：

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>

Answer 1

你的问题与淘汰赛或引导程序无关，但你如何设置你的缩略图样式：

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

因此，您的选择器img过于通用，也会应用于弹出窗口中的图像。您可以通过为弹出框内的图像添加新规则来修复它。

Bootstrap将类popover添加到popover的容器中，以便您可以编写如下内容：

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

演示JSFiddle.