引导程序（bootstrap）：弹出框中的图片超出了窗口大小

Question

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

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

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

即使设置宽度属性也无法更改弹出窗口宽度。

非常感谢您的帮助。

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。

- VSri58

Answer 1

您应该在img标签中添加width属性

这里是一个示例

$(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;
}

这里是更新的示例代码链接。

- Krishna Rani Sahoo

---

你的fiddle链接显示了不同的代码。我不想改变图片大小。我需要弹出窗口的大小扩展以适应原始大小的图像。你有解决方法吗？ - VSri58

@VSri58 如果您不想更改图像的固定宽度，则可以更改弹出框的最大宽度`.popover{max-width:1000px !important;}` - Krishna Rani Sahoo

Answer 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"});
});

- Vadym

Answer 3

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

 .popover{
    max-width:80%;   
}

或者

.popover{
    min-width:80%;   
}

但如果更改图像宽度不是问题，那么只需将图像的宽度设置为100%。 例如：

img{
       width: 100%;
    }

- monica

Answer 4

弹出框的宽度受其容器宽度的限制，将其设置为 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 对于 这个问题 的回答，获取更多信息。

- TeamRad

Answer 5

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

.popover {
    max-width:350px;   
}

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

- RC Cola