jQuery

【jQuery】ビューポートまたはコンテナベースの幅にマッチさせるjQuery対応の画像プラグインjQuery Responsive Image

March 17, 2018

jQuery Responsive Imageはビューポートまたはコンテナの幅が一致するものにさせるjQuery対応のイメージプラグイン。必要とするサイズでイメージをロードすることができます。

Usage

<!-- jQuery >1.7.2 is required -->
<script src="js/jquery.min.js"></script>
<script src="../build/jquery.responsiveImage.min.js"></script>
<script>
    $(document).ready(function () {
        $('.picture').responsiveImage();
    });
</script>

markup:

<span class="picture">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg" data-min-width="600"></span>
    <span data-src="large.jpg" data-min-width="1000"></span>
</span>

<!-- Viewport Width: 0px - 599px -->
<span class="picture">
    <img src="small.jpg" alt=""/>    
</span>

<!-- Viewport Width: 600px - 999px -->
<span class="picture">
    <img src="medium.jpg" alt=""/>    
</span>

<!-- Viewport Width: >1000px -->
<span class="picture">
    <img src="large.jpg" alt=""/>    
</span>