Fit Images Within Their Parent Container - sameSize.js
File Size: | 5.34 KB |
---|---|
Views Total: | 969 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

sameSize.js is a jQuery plugin that automatically scales, shrinks, crops and re-aligns images to fit within their parent containers. Works with the <img>
tag that makes your image behavior like the CSS background properties.
How to use it:
1. Load the JavaScript file 'sameSize.js' after jQuery library (slim build).
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"> </script> <script src="plugins/sameSize.js"></script>
2. Insert your image into a container element.
<div class="parent"> <img src="1.jpg" alt=""> </div> <div class="parent"> <img src="2.jpg" alt=""> </div> <div class="parent"> <img src="3.jpg" alt=""> </div> ...
3. Call the function fitImage
on the img
tag and done.
$('.img').fitImage();
4. Set the selector of the container element.
$('.img').fitImage({ containerSelector: 'div' });
5. Set the vertical and horizontal alignment of the contained image.
$('.img').fitImage({ verticalAlign: 'middle', horizontalAlign: 'center' });
6. Set the delay time for the resize event.
$('.img').fitImage({ // time in milliseconds // default: 250 resizeDelayTime: '50' });
This awesome jQuery plugin is developed by angelonunez2014. For more Advanced Usages, please check the demo page or visit the official website.