Dynamic Size Sprites

by brettwp

HTML

<div class="ex1">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

<div class="ex2">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

<div class="ex3">
    <img src="http://www.placekitten.com/g/600/400"/>
</div>

CSS

.ex1 {
    position: relative;
    overflow: hidden;
    width: 200px;
    height: 200px;
}
.ex1 img {
    position: absolute;
    top: -100px;
    left: -100px; 
    width: 600px;
    height: 400px;
}

.ex2 {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
}
.ex2 img {
    position: absolute;
    top: -50px;
    left: -50px; 
    width: 300px;
    height: 200px;
}

.ex3 {
    position: relative;
    overflow: hidden;
    width: 50px;
    height: 50px;  
}
.ex3 img {
    position: absolute;
    top: -25px;
    left: -25px; 
    width: 150px;
    height: 100px;
}