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

Posted 2023-03-06

【中文标题】bootstrap：弹出框内的图像超出了窗口大小

【英文标题】：bootstrap: Image inside the popover is extending beyond the window size

【发布时间】：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

【参考方案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;