引导弹出窗口中的图像溢出弹出窗口答案

【问题标题】：Image in bootstrap popover is overflowing popover引导弹出窗口中的图像溢出弹出窗口
【发布时间】：2021-03-07 13:14:44
【问题描述】：

我正在尝试在弹出窗口中创建一个包含图像的页面，我使用在线演示来创建它，但是当图像大于某个大小时，它开始从弹出窗口溢出。我该如何解决这个问题？

Js Fiddle 在这里：https://jsfiddle.net/rdvL6kj9/10/

html:

  <div class="container my-4">
    <p class="font-weight-bold">This simple example shows how to place an image within a bootstrap popover. You can
      define if you want to launch the popover on hover or on click.</p>

    <p><strong>Detailed documentation and more examples of Bootstrap grid you can find in our <a href="https://mdbootstrap.com/docs/jquery/javascript/popovers/"
    target="_blank">Bootstrap Popovers Docs</a></strong></p>

    <a class="btn btn-primary" data-toggle="popover-hover" data-img="https://placekitten.com/500/300">Hover
      over me</a>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

js:

    // popovers initialization - on hover
    $('[data-toggle="popover-hover"]').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () { return '<img src="' + $(this).data('img') + '" />'; }
    });

这是问题的截图：

【问题讨论】：

标签： css twitter-bootstrap bootstrap-4 popover

【解决方案1】：

你快到了。我在 img 标签中添加了一个引导内置类 > class="img-fluid" 以使其在所有图像中都具有响应性

   $('[data-toggle="popover-hover"]').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () { return '<img src="' + $(this).data('img') + '"  class="img-fluid"/>'; }
    });

这是工作的fiddle

【讨论】：

"img-fluid" 会缩小图像。我希望图像宽 500 像素，但不会溢出弹出框。我需要弹出框更大而不是图像更小。
没关系，明白了，必须覆盖“popover”类的最大宽度

【解决方案2】：

想通了，对于以后遇到这个问题的人来说，答案是：如果您可以缩小图像，您可以使用 Sai Manoj 的答案，如果您希望图像更大，尽管您需要像这样覆盖 popover 类的 max-width 属性：

.popover {
    max-width: none;
}

【讨论】：