20'C 흐림
서울 강남구
resizeImageToParent.js is a cross-browser responsive <img> jQuery plugin which dynamically stretches or cuts off images to fill its parent container on window resize, while maintaining aspect ratio and maintaining centering. Similar to the background-size: cover for background images.
How to use it:
1. Wrap your image into a container as this:
<div class="imageContainer">
<img src="sample.jpg" class="image">
</div>
2. Hide the overflowing edge of the image when resizing.
.imageContainer {
overflow: hidden;
}
3. The image container should have a dynamic width.
.imageContainer {
max-width: 600px;
height: 450px;
...
}
4. Put jQuery JavaScript library and the jQuery resizeImageToParent.js script at the bottom of the web page.
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.resizeimagetoparent.min.js"></script>
5. Attach the plugin to the image and done.
$(function() {
$('.image').resizeToParent();
});