bootstrap：弹出窗口内的图像超出了窗口大小

Question

我目前正在使用 Bootstrap 3 弹出窗口功能，单击按钮即可显示图例

图例是一个图像文件，我想在弹出窗口内显示该图像

但图像宽度超出了弹出窗口宽度

即使给出 width 属性也不会改变弹出窗口的宽度。

我们将非常感谢您的帮助。

超文本标记语言

<button id="btnLegend" class="btn btn-warning" data-toggle="popover">Legend</button>

JavaScript

$(function () {
    $('#btnLegend').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\">",
         'title':'Popup Test',
         'html':true,
         'container':'body'
        }
    );
});

这是我的小提琴

Answer 1

您应该为 img 标签添加宽度

这是例子

$(function () {
    $('#example').popover(
        {'placement':'bottom',
         'content':"<img src=\"http://www.hopkinsmn.com/about/img/map-legend.gif\" alt=\"legend\" style='width:100%' >",
         'title':'Popup Test',
         'html':true
        }
    );
});

如果您不想更改要固定的图像的宽度，请更改弹出框的最大宽度

.popover{

    max-width:1000px !important;
}

这是更新的小提琴的链接