jQuery.ImageFill demo

More information, documentation and download on the project's page : http://pioul.fr/jquery-imagefill

HTML

<script src="http://pioul.fr/ext/jquery-imagefill/jquery.imagefill.min.js"></script>
<table>
    <tr>
        <td></td>
        <td>200x100 container</td>
        <td>100x100 container</td>
        <td>100x200 container</td>
    </tr>
    <tr>
        <td>
            1000x1000 image
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/1000/1000"/>
            </div>
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/1000/1000"/>
            </div>
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/1000/1000"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            1000x600 image
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/1000/600"/>
            </div>
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/1000/600"/>
            </div>
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/1000/600"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            600x1000 image
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/600/1000"/>
            </div>
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/600/1000"/>
            </div>
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/600/1000"/>
            </div>
        </td>
    </tr>
    <tr>
        <td>
            50x50 image
        </td>
        <td>
            <div class="container">
                <img src="http://placekitten.com/g/50/50"/>
            </div>
        </td>
        <td>
            <div...

CSS

body{
    margin: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: #333;
    font-weight: bold;
    background-color: #fff;
}
.container {
    width: 100px;
    height: 100px;
    margin: 20px;
    border: 5px solid #333;
    border-radius: 5px;
}
table tr td {
    text-align: center;
}
table tr td:nth-child(2) .container {
    width: 200px;
}
table tr td:nth-child(4) .container {
    height: 200px;
}

JavaScript

// make every image fill their direct parent
$("img").imagefill();

// subscribe to the "fillsContainer" event
$("img").on("fillsContainer", function(event, imageProperties){
    console.log(event, imageProperties);
});