マーカーネット株式会社

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

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

関連記事

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xで404 Not Foundエラーをリダイレクトする方法

CakePHP2.Xでは、404 NOT Foundエラーが発生した場合、 デフォルトでは、 app/View/Errors/error400.ctp の内容が表示されます。 サイトによっては、 40 …

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

【世界一カンタン?!】1枚の画像だけでロールオーバーをさせる方法

画像のロールオーバーって面倒ですよね。 2枚の画像を用意してJavascriptで制御して、、や背景画像していしてh overで、、 というのが一般的ですが、 今回は画像1枚だけ。CSSに4行記載する …

Movable Type6がリリースされました

Movable Type6がリリースされました

movable type6 以下の新機能が追加されたとのことです。 – Data API APIを通じてMovable Typeの管理画面の操作や記事の読み込みが可能になったとのことです。 – Cha …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook