imgLiquidを使い画像をトリミング

imgLiquidを使って画像をトリミングし、マルチデバイスでセンター寄せにする

外部ファイル読み込み

<script src='//code.jquery.com/jquery-1.10.2.min.js'></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/app.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/imgLiquid-min.js"></script>


包括する要素へのクラスの記述

<div class="imgLiquidFill imgLiquid">
  <img src="./xxx" />
</div>


app.jsの作成

$(document).ready(function() {
    $(".imgLiquidFill").imgLiquid({
      fill: true,
      verticalAlign: 'center',
      horizontalAlign: 'center'
  });
});


生成されるHTMLとCSS

<div class="imgLiquidFill imgLiquid imgLiquid_bgSize imgLiquid_ready" style="background-image: url(&quot;http://xxx.jpg&quot;); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;">
  <img width="1140" height="450" src="http://xxx.jpg" class="pngfix wp-post-image" style="display: none;">
</div>


github.com