L'image dans le popover bootstrap déborde de popover [duplicate]

Question

J'essaie de créer une page avec des images dans des popovers J'ai utilisé une démo en ligne pour la créer, mais lorsque l'image devient plus grande qu'une certaine taille, elle commence à déborder du popover. Comment puis-je réparer ça?

Js Fiddle ici: 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') + '" />'; }
    });

Voici une capture d'écran du problème:

Answer 1

Vous y étiez presque. J'ai ajouté une classe bootstrap intégrée> class="img-fluid"à la imgbalise pour la rendre réactive sur toutes les images

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

Voici le violon de travail

Answer 2

J'ai compris, pour quiconque trébucherait sur cette question à l'avenir, voici la réponse: si vous êtes d'accord avec la réduction de l'image, vous pouvez utiliser la réponse de Sai Manoj, si vous voulez que l'image soit plus grande, mais vous devez remplacer la propriété max-width sur la classe popover comme ceci:

.popover {
    max-width: none;
}