Auf der Homepage von dingqiu.com habe ich das Karussell-Plug-In von Bootstrap verwendet, um die Bilder im Artikel anzuzeigen. Ich greife automatisch das erste Bild des Artikels im Programm als Bild, das in der Karussellsteuerung angezeigt werden soll. Da die Bildgrößen des Artikels variieren und die Größe des Karussell-Plug-Ins im Grunde genommen festgelegt ist, wird das Bild beim Anzeigen deformiert. Ich habe viele chinesische Methoden online gefunden, aber sie nicht gelöst (der Prozess ist gewunden, also werde ich es nicht wiederholen). Bis ich dieses jQuery Scaling -Plug -In - jqthumb.js. Schauen wir uns an, wie man es benutzt und wie man es verwendet, um die Größe des Bildes in der Karussellkontrolle zu kontrollieren, und es kann unverformt werden und die Hauptteile des Bildes anzeigen (ähnlich wie der Bildmischungseffekt von WeChat -Momenten - ich weiß nicht, ob Sie nicht bemerkt haben, was das Verhältnis der Bilder, die Sie in Weechat -Momenten gepostet haben, nicht perfekt sind, kann immer perfekt sein. Schauen wir uns zunächst den HTML -Code von Bootstraps Karussell an:
<div id = "carousel-example-generic" data-ride = "carousel"> <!-Wrapper für Folien-> <div rollen = "listbox"> <div> <a href = "bild ein article path"> <img src = "bild one path" onload = "Drawimage (this)"/> </a> <div> <a <a style = " href = "Bild einfügen ein Artikel Pfad"> Bild Eins Titel </a> </h4> </div> </div> <div> <a href = "enthalten Bild zwei Artikelpfad"> <img src = "Bild zwei Pfad" Onload = "DrawImage (this)"/> </a> <h4> <a style = "color: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß: weiß:" color: weiß "" " href="Included Picture Two Article Path">Image Two Title</a> </h4> </div> </div> <div> <a href="Included Picture Three Article Path"> <img src="Included Picture Three Path" onload="DrawImage(this)"/> </a> <div> <h4> <a style="color:white;" HREF = "Bild drei Artikel Path"> Bild drei Titel </a> </h4> </div> </div> </div> </div> </div> </div> </div> </div>
Aus dem obigen Code können wir sehen, dass jedes Bild (IMG) beim Laden (Onload) eine Funktion aufruft. In dieser Funktion können wir die Methode jQthumb.js aufrufen, um die Größe des Bildes zu steuern. Beachten Sie, dass die Funktion vor dem obigen HTML -Code hinzugefügt werden muss. Andernfalls schlägt die Steuerung der Bildgröße beim Erstladen fehl (aufgrund des Ladens des Lades des Timings). Der Funktionscode lautet wie folgt:
<!--Import plugin--><script type="text/javascript" src="/static/plugins/thumb/js/jqthumb.js"></script><script>function DrawImage(hotimg){ $(hotimg).jqthumb({ classname : 'jqthumb', width : '100%', height : '300px', position : { y: '50%', X: '50%'}, Zoom:' 1 ', Methode:' Auto ',});} </script>In dieser Funktion nennen wir die JQThumb-Methode, um eine Miniaturinformation des Originalbildes mit einer Breite von 300 PX und dem Karussell-Plug-In zu definieren. Die Miniaturansicht wird aus der Mitte des Bildes erzeugt (beachten Sie die Einstellung seines Positionsattributs). Auf diese Weise kann auch wenn sich die Größe des Bildes ändert, der Hauptinhalt des Bildes angezeigt werden und das Bildverhältnis unverändert bleiben.
Quelle: dingqiu.com
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
Das obige ist der gesamte Inhalt. Ich hoffe, es wird für alle hilfreich sein und ich hoffe, dass jeder wulin.com mehr unterstützen wird.