マーカーネット株式会社

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="https://www.markernet.co.jp/blog/wp-content/uploads/2014/09/jquery.png" alt="jquery">
</div>
<div id="ImgSample1" class="ImgSample">
<img src="https://www.markernet.co.jp/blog/wp-content/uploads/2014/09/jquery.png" alt="jquery">
</div>


サンプル

jquery
jquery

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

-javascript(jquery), WEB制作

執筆者:


comment

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

関連記事

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。

初めてのホームページ運用。これだけ知っておけば始められます。 web制作の仕事をず~~~っとやっていると専門的な事も基本的なことと勘違いしてしまいがちです。私もwebに触れる前は「ブラウザって何?」「 …

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

皆様こんばんは。 今春に新卒で入社しました、ひよっこWEB制作者のMです。 お腹と背中に貼るカイロを装備し、なんとか寒さをしのいでおります。 先日誕生日を迎え、ついにハタチと言えなくなってしまいました …

サイトリニューアル!する?しない?

こんにちは。web制作初心者のKです! さてさて、今日は初心者の私がサイトを制作するうえで、 「サイトリニューアルの判断材料のひとつ」をお話したいと思います! これは、「BtoC(消費者向け)サイトの …

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る時に私が最低限やっていること【htmlソース編】

レスポンシブサイトを作る機会がここ最近かなり増えて来ました。 かくいうこのブログもレスポンシブ対応しています。 レスポンシブサイトを作る時には デザイン面等でも気を付ける事は幾つかありますが、 今回は …