DingQiu.comのホームページでは、ブートストラップのCarouselプラグインを使用して記事に写真を表示しました。カルーセルコントロールに表示される画像として、プログラムの記事の最初の画像を自動的に取得します。記事の画像サイズは異なり、カルーセルプラグインのサイズが基本的に固定されているため、表示されると画像が変形します。私は多くの中国の方法をオンラインで見つけましたが、それらを解決していません（プロセスは曲がりくねっているので、繰り返しません）。このjQueryスケーリングプラグイン-jqthumb.jsを見つけるまで。それを使用する方法と、それを使用する方法を見てみましょう。カルーセルコントロール内の画像のサイズを制御する方法を見てみましょう。これは、変形していない状態で写真の主要な部分を表示できます（WeChatの瞬間の画像混合効果に似ています。まず、BootstrapのCarouselのHTMLコードを見てみましょう。
<div id = "carousel-example-generic" data-ride = "carousel"> <！ - slidesのラッパー - > <div role = "listbox"> <div> <a href = "ficture one article path"> <img src = "img src =" 1つのパス "onload =" drawimage（this） "/> </a> <h4> <h4> < href = "含まれる写真1つの記事パス">画像1タイトル</a> </h4> </div> </div> <div> <a href = "添加された2つの記事パス"> <img src = "img src =" 2パス "onload =" drawimage（this） "/> </a> <div> <h4> <a style：" color; " href = "含まれる画像2つの記事パス">イメージ2タイトル</a> </h4> </div> </div> <div> <a href = "添加された3つの記事パス"> <img src = "inclute 3 path" onload = "drawimage（this）"/> </a> <div> <h4> <a style = "white;" href = "含まれている写真3記事パス">画像3タイトル</a> </h4> </div> </div> </div> </div> </div> </div> </div>
上記のコードから、各画像（IMG）がロード時に関数のドローイムを呼び出すことがわかります（onload）。この関数では、jqthumb.jsメソッドを呼び出して、画像のサイズを制御できます。上記のHTMLコードの前に関数を追加する必要があることに注意してください。それ以外の場合、画像サイズの制御は、初めてロードするときに（ページの読み込みタイミングのため）失敗します。関数コードは次のとおりです。
<！ - インポートプラグイン - > <スクリプトタイプ= "text/javascript" src = "/static/plugins/thumb/js/jqthumb.js"> </script> function drawimage（hotimg）{$（hotimg）.jqthumb（{classname： 'jqthumb'、width： '100％'、 '300px' '' pocutes x：'50％ '}、zoom：' 1 '、method：' auto '、}）;} </script>この関数では、JQThumbメソッドを呼び出して、300pxの幅とCarouselプラグインで元の画像のサムネイルを定義します。サムネイルは画像の中心から生成されます（その位置属性の設定に注意してください）。これにより、画像のサイズが変更されたとしても、画像の主な内容を表示でき、画像比は変更されないままになります。
出典：DingQiu.com
それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラッププラグインの使用チュートリアル
上記はすべてのコンテンツです。私はそれがすべての人に役立つことを願っています、そして私は誰もがwulin.comをもっとサポートすることを願っています。