[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFitサイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。 ImageFit ImageFit -GitHub ImageFitのデモ ImageFitの使い方 ImageFitのデモ デモはサイズがバラバラな画像が6枚、それぞれ同じサイズの矩形に配置します。 下のキャプチャは同じサイズの画像のように見えますが、既にトリミングして配置された状態です。
[JS]サイズが不明な画像を指定したエリアにフィットさせたり、配置を調整できるスクリプト -Image Scale
画像の長い辺に合わせて、フィット Image Scaleの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <head> ... <script src="jquery.js" type="text/javascript"></script> <script src="image-scale.js" type="text/javascript"></script> </head> Step 2: HTML 大きさを調整したい画像に「class=scale」を加えます。 <div class="image-container"> <img class="scale" src="img/example.jpg"> </div> さらに、画像の位置などを設定する場合はdata属性を加えます。 <div class="image-c
[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb
大きいサイズの画像から、クロップやリサイズなどして小さいサイズのサムネイルを自動生成するjQueryのプラグインを紹介します。 サムネイルはテキスト配置やさまざまなエフェクトにも対応しています。 jQuery NailThumb [ad#ad-2] NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコンテナとサムネイルのサイズ設定です。 外部ファイル スクリプトとスタイルシートを外部ファイルとして記述します。 <script type="text/
[JS]エレメントの背景画像のサイズを自動的に表示サイズに合わせて最適化するスクリプト -jQuery Anystretch
ページ上のさまざまなブロックレベルの要素の背景に設定した画像のサイズを自動的に、表示サイズに合わせて最適化するjQueryのプラグインを紹介します。 デモページ：幅480pxで表示 Anystretchの使い方 外部ファイル 「jquery.js」と当スクリプトをページの下、</body>の上あたりに記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="/jquery.anystretch.min.js"></script> HTML HTMLの記述は通常通りです。下記はデモページの一番上のコードです。 ※jQueryのセレクタで背景を表
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
