Image Center Crop
An image that stays it's original size and is simply cropped equaly from the left and right as the width of it's parent container changes.
<style>
/* Image Center Crop Pattern CSS */
@media only screen and (max-width: 599px) {
div[class="pattern"] {
position: relative;
overflow: hidden;
width: 100%;
height: 450px;
}
div[class="pattern"] img {
position: absolute;
top: 0;
left: 50%;
margin-left: -300px;
}
}
</style>
<div class="pattern">
<img src="tattoos.jpg" alt="Tattoo & Piercing" width="600" height="450" style="display: block; border: 0;" />
</div>