マーカーネット株式会社

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

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

関連記事

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

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

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

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

【CSS3】簡単なドロップシャドウや光彩(グロー)の付け方!

デザインを格好よくするためにシャドウを付けたりしますよね。 しかし、サイズが異なるたびに画像を背景に指定したりしなければならないのは大変です。 しかも、シャドウの幅の分だけはみ出ているということもあり …

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

【デザインに一工夫】ちょっと変わったアイコン素材サイト3選

日頃WEBデザインの仕事に携わる関係上、素材サイト巡りをすることがよくあります。 その中で、最近面白いなと思ったサイトをご紹介したいと思います。   ヒューマンピクトグラム2.0 http: …

【グローバルサイト運営担当者必見】多言語サイトSEOで絶対外せない3つのポイント!

弊社では英語、簡体中国語、繁体中国語、韓国語など世界主要言語でのSEOやサイト制作に取り組んでおります。 それぞれの言語のサイトのSEO対策の基本原則は変わらないですが、海外SEOの効率を向上させ、ア …

レスポンシブにも対応!③ フリックスライダーを作成してみました。

レスポンシブにも対応!③ フリックスライダーを作成してみました。

今回はレスポンシブに対応できるスライドショーを作成してみたいと思います。 ただ、レスポンシブに対応しているだけでなく、 スマホに便利なフリックも可能なものをご紹介致します。 前回までの関連記事です。 …