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

【问题标题】：bootstrap: Image inside the popover is extending beyond the window sizebootstrap：弹出框内的图像超出了窗口大小
【发布时间】：2015-01-10 08:31:34
【问题描述】：

我目前正在使用 Bootstrap 3 弹出框功能来显示单击按钮时的图例

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

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

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

非常感谢您的帮助。

HTML

<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'
        }
    );
});

这是我的fiddle

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案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;
}

这里是更新后的fiddle的链接

【讨论】：

指向您的小提琴的链接显示了不同的代码。而且我不希望更改图像大小。我需要扩展弹出窗口大小以适应图像的原始大小。你有办法解决吗？
@VSri58 如果您不想更改要固定的图像宽度，请更改弹出框的最大宽度.popover{ max-width:1000px !important; }

【解决方案2】：

我使用这个解决方案

var $btn = $("#my_btn");
$btn.popover({
  content: '<img src="' + $btn.attr('href') + '">',
  html: true,
  trigger: 'hover',
  placement: 'left',
  container: 'body'
})
.on("show.bs.popover", function(e){
  $(e.target).data("bs.popover").tip().css({"max-width": $btn.data('width') + 50 + "px"});
});

【讨论】：

【解决方案3】：

如果您不想更改图像的宽度，那么您可以设置弹出框类的max-width 或min-width 属性。例如：

 .popover{
    max-width:80%;   
}

或

.popover{
    min-width:80%;   
}

但如果改变图像宽度没有问题，那么只需将图像宽度设置为 100%。例如：

img{
       width: 100%;
    }

【讨论】：

【解决方案4】：

弹出框的宽度被限制为其容器宽度的 100%。设置为 body 会更宽：

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

查看 Anil 对this question 的回复了解更多信息。

【讨论】：

【解决方案5】：

只需通过 CSS 限制图像和框：

.popover {
    max-width:350px;   
}

.popover img {
    max-width: 250px;
}

【讨论】：