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

jQuery Responsive Imageはビューポートまたはコンテナの幅が一致するものにさせるjQuery対応のイメージプラグイン。必要とするサイズでイメージをロードすることができます。
<!-- 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>
source
sourcePrefix
container
resizeEvent
minWidthDefault
maxWidthDefault
minDprDefault
attributes
preload
autoDpr
onGetWidth
onLoadSources
MIT