Vergrößern Sie Bild auf hover-Twitter Bootstrap

Ich bin neu auf bootstrap und möchte um es zu vergrößern alle Bilder mit Klasse img-rounded auf hoverring

Implementiert habe ich es so:

<div class="container">
  <div class="row">
    <div class="span4">
      <div class="well">
        <img src="MyImage.png" class="img-rounded">
      </div>
    </div>
  </div>
</div>

<script>
  $( document ).ready(function() {
    $('.img-rounded').popover({
      html: true,
      trigger: 'hover',
      placement: 'bottom',
      content: function () {
        return 
          '<img class="img-rounded" style="float:right;width:500px;max-width:500px;" src="
          +$(this)[0].src + '" />';
      }
    });
  });

</script>

Leider ist die bounding box um das vergrößerte Bild wird nicht vergrößert. Wie man dieses Problem beheben?

Haben Sie eine demo, die ich überprüfen kann?

InformationsquelleAutor Ruut | 2013-05-23

  1. 2

    Dies ist verursacht durch die popovers Standard max-width: 276px. Fügen Sie einfach

    <style type="text/css">
.popover {
    max-width: 1000px;
}
</style>

    (oder jeder andere Wert, das auto funktioniert hier nicht) und das popover passt das Bild.

    InformationsquelleAutor davidkonrad

  2. 1

    Könnten Sie dies leicht tun, nur mit css.

    #img1{
height:200px;
}
#img1:hover{
height:400px;
}

    Ebenso kann man eine Reihe von zusätzlichen Effekte, die bei Bedarf mit weit weniger code.
    Sie können auch verwalten die übergeordneten div-entsprechend passend zu dieser css-Regel. Nicht ALLE Dinge erfordern JS.

    InformationsquelleAutor Colt Stumpf

Schreibe einen Kommentar