マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery) WEB制作

jQueryを使ってみよう【親要素の大きさに合わせて画像をリサイズできるjQueryプラグイン「imgLiquid」】

投稿日:2015年7月10日 更新日:

html・CSSでのマークアップは何となく分かるけどjQueryはちょっと分からないという方、
今からjQueryを使ってみようと思っている方必見。
今回は便利なjQueryプラグイン「imgLiquid」をご紹介します。

jQueryの導入はjQueryを使ってみよう【導入編】を確認して下さい。

jQueryプラグイン「imgLiquid」を使ってみよう

画像をHTMLページ内に表示する場合、表示したいエリアより画像サイズが大きい場合や、縦横比(アスペクト比)が表示したいエリアと一致しないために画像が伸縮されて表示されたりしてしまいます。
「imgLiquid」は表示したいエリア(親要素)の大きさに合わせて画像のリサイズを行ってくれるjQueryプラグインです。
「imgLiquid」のダウンロードはこちら

jQuery

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/imgLiquid-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ImgSample').imgLiquid({
fill: false // 縦横比(アスペクト比)を維持
});
});
</script>

CSS

<style>
.ImgSample {
margin-bottom:20px;
border:1px solid #999;
}
#ImgSample0 {
width:400px;
height:300px;
}
#ImgSample1 {
width:200px;
height:300px;
}
</style>

HTMLソース

<div id="ImgSample0" class="ImgSample">
<img src="http://www.markernet.co.jp/blog/wp-content/uploads/2014/09/jquery.png" alt="jquery">
</div>
<div id="ImgSample1" class="ImgSample">
<img src="http://www.markernet.co.jp/blog/wp-content/uploads/2014/09/jquery.png" alt="jquery">
</div>


サンプル

jquery
jquery

ブログサイト等で投稿画像のサイズが統一されていない場合等にとても便利です。
導入方法も使い方も非常に簡単ですね!

-javascript(jquery), WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

ウェブデザインの幅が広がるFREEフォントの紹介

ウェブデザイン作りに当たって、フォントの選択はすごく大事なところであり難しい問題です。 普段、使うフォントってもう決まっていたりしませんか? 私の場合、欧文はHELVETICA,Futuraを和文はモ …

戦略なきWEBブランディングは効果なし

戦略なきWEBブランディングは効果なし

ブランディングとうい視点で、日本酒について考えてみたいと思います。 旅人・中田英寿 たどり着いた先は「日本酒ビジネス」のなぜ? “旅人”のたどりついた先は酒蔵だった。元サッカー日本代表の中田英寿(37 …

面白い動きや便利な機能をJSで実装! その3:一目で印象に残るアニメーション背景を作成!

web制作をされている方ならば、サイトを訪れてくれた人を少しでも長く引き留めたいと思われると思います。 一体どうやって見てくれる人の興味をひけるのか。色々な方法がありますが、その一つとして面白い動きを …

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

手軽に雰囲気を変える!無料英字webフォントのまとめ -個性的編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第一弾として「個性的な英字フォント( …

夏にピッタリ!打ち上げ花火をテーマにしたブラシ素材

こんにちは新人デザイナーTです。 今回は無料で公開されているphotoshop用の打ち上げ花火の演出が簡単に出来るブラシ素材をいくつかご紹介させていただきます。 収録されているファイルの中には様々な打 …