Bootstrap Popover not reponsive

Question

首次打开时，弹出窗口无法正确显示图像。

知道我该如何确保它总是显示正确吗？

https://jsfiddle.net/n2Lfro30/1/

这是按钮：

<button type="button" class="btn btn-primary" data-rel="popover" title="<strong>Heading</strong>" data-placement="right" data-content="<img src='https://picsum.photos/400'>"> Click me </button>

这是JS:

$(document).ready(function() {
$('[data-rel=popover]').popover({
html: true,
trigger: "hover"
});
})

Answer 1

您可以使用popover模板属性使popover内部的图像响应，也可以使用img-fluid类对img标记。

$(document).ready(function () {
$('[data-rel=popover]').popover({
html: true,
trigger: "hover",
template: `<div class="popover p-2" role="popover">
<div class="popover-arrow"></div>
<div class="popover-inner"><h4>Heading</h4></div>
<img src="https://picsum.photos/400" alt="Image" class="img-fluid">
</div>`
});
})

img{
width:100%;
}

<script src="https://homylive.com/erp/assets/js/jquery.min.js"></script>
<script src="https://homylive.com/erp/assets/bootstrap/js/bootstrap.min.js"></script>
<link href="https://homylive.com/erp/assets/bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-primary" data-rel="popover" title="<strong>Heading</strong>" data-placement="right"> Click me </button>

Answer 2

听起来您希望图像在容器内具有响应性。首先，将样式width:100%; height:auto添加到您的图像中，看看它有什么作用。(然后我建议用css代替内联样式进行重构。(

<img src='https://picsum.photos/400' style='width:100%; height:auto'>

使用引导程序的风格，它将是-

<img src='https://picsum.photos/400' class='img-responsive'>

https://jsfiddle.net/ho2btzga/