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をもっとサポートすることを願っています。