マーカーネット株式会社

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

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

関連記事

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの~!? なんて …

ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)

ワードプレス導入時に入れておくと便利なプラグイン(セキュリティ編)

ワードプレスはオープンソースのため、そのソースコードが公開されております。 誰でも無償で、誰でも改変して商用利用も可能であるというメリットもございますが、 デメリットとして悪意のある者から不正侵入を許 …

【Vol.5】優れたキャッチコピーを見て、閃き力を上げよう!【映画・アニメ編】

冬っ子のわたくし、この暑さもう限界です 皆様こんにちは。いかがお過ごしでしょうか? 真冬生まれのため連日の暑さに耐えきれず瀕死状態のAD&デザイナーMです。   明日から気温が落ち着くようで …

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …

WEBトレンド! 全面に写真を配置した 最新サイトのご紹介 ~素敵サイトの旅 その3~

こんにちは!web初心者のKです! 今日は曇りですが、みなさんお風邪など召されていませんか? 私は雪対策にブーツとコートを少し前に購入しました! 備えあれば憂いなし! もう雪が来ても怖くありません!! …