This time I will share jQuery Plugin and tutorial about jQuery Plugin To Resize And Center An Image Within Its Container – Image Cover, hope it will help you in programming stack.
Image Cover is a jQuery plugin which dynamically resizes and centers your image to fit its parent container in your responsive webpage. The plugin allows to scale your image as big as possible and make it always centered inside the container, similar to the CSS background-size: cover property. You can use the plugin in Bootstrap carousel to make your images fully responsive.
How it works:
- Get the container and image sizes.
- Resize image using the container width like a reference size to resizing.
- Check that the new image height is equal or more than the container height.
- If new height image is less than container height, we use the heght container like a size reference to resize image again.
- Define the image margin to centrate in container.
- Resize and apply new marings in image with css.
How to use it:
1. Add your image with some overlay text into a container.
5 |
<img src="1.jpg" class="image-cover"> |
2. Include jQuery library and the jQuery Image Cover plugin at the bottom of the webpage.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.image-cover.js"></script> |
3. Just call the function on the image and done.
1 |
$(".image-cover").imageCover(); |
4. Apply the plugin to your Bootstrap carousel component.
1 |
$(".image-cover").imageCover({ |
2 |
carousel: "#your-carousel-id" |
This awesome jQuery plugin is developed by jordicuenca. For more Advanced Usages, please check the demo page or visit the official website.
