Help us understand the problem. What is going on with this article?

imgタグ内の画像をアスペクト比を保ちながら表示するjQueryプラグイン

More than 5 years have passed since last update.

  画像をHTMLページ内に表示する場合、表示したいエリアより画像サイズが大きい場合や、縦横比(アスペクト比)がボックスと一致しないために画像が伸縮されて表示されたりしてしまい、残念です。

 「imgLiquid」というプラグインを使うと、ボックス内に画像をリサイズして表示してくれるので便利です。使い方も非常に簡単なのでご紹介します。
こちらの記事に既に紹介がされていますが、この記事では少しオプションの説明も加えておきます。

入手方法

https://github.com/karacas/imgLiquid

使い方

jQueryとimgLiquid.jsを読み込む

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/imgLiquid-min.js"></script>

imgタグを内包する要素に対してidを振る

<div id="img-container" style="width:200px; height:150px;">
    <img src="/cat.jpg" />
</div>

imgタグを内包する要素に対しimgLiquidを実行

<script>
$('#img-container').imgLiquid();
</script>

オプションについて

オプションなし

<script>
$('#img-container').imgLiquid();
</script>

image1.png

アスペクト比を維持

<script>
$('#img-container').imgLiquid({ fill: false });
</script>

image2.png

画像の垂直位置を指定

verticalAlignで指定します。center/top/bottomなど。

<script>
$('#img-container').imgLiquid({ verticalAlign: 'top' });
</script>

image3.png

水平位置を指定

horizontalAlignで指定します。center/left/rightなど。

<script>
$('#img-container').imgLiquid({ fill: false, horizontalAlign: 'right' });
</script>

image4.png

HTML5の独自データ属性でオプションを指定することもできる

以下の属性が指定可能

  • data-imgLiquid-fill
  • data-imgLiquid-verticalAlign
  • data-imgLiquid-horizontalAlign
<div id="img-container" data-imgLiquid-fill="false" data-imgLiquid-horizontalAlign="left" style="width:200px; height:150px;">
    <img src="/cat.jpg" />
</div>
<script>
$('#img-container').imgLiquid();
</script>

image5.png

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away