Responsive Image cropping

Question

I have been trying to crop an image for screen sizes below 768px width. The image should crop equally from the left and right sides.

Here is an Example of the Image at full size (the dimensions of the image are 900px wide by 250px tall.:

Here is the cropped version I have been trying to create once the screen size is less than 768p wide. In this version the image is at 320px wide but it should start cropping at 768px:

Here is the HTML I have been using so far:

<div class="container">
    <div class="image-container">
        <img src="http://i.imgur.com/H7cpsLK.jpg" />
    </div>
</div>

Here is the CSS:

.container {
    width: 1280px;
    max-width: 100%;
    min-width: 768px;
}

.image-container {
    width:100%;
}

img {
    max-width:100%;
    height:auto;
}

@media only screen and (max-width:768px) {
    .image-container {max-width:768px; overflow:hidden;}
}

Here's a fiddle I have been using to try and create this: http://jsfiddle.net/QRLTd/

Is it possible to crop an image from both the left and right sides at the same time?

Answer 1

LIVE DEMO

HTML:

<div class="container">
    <div class="image-container"></div>
</div>

CSS:

.container {
    width: 100%;
    height:200px;
}

.image-container {
    position:relative;
    margin:0 auto;
    background:url(http://i.imgur.com/H7cpsLK.jpg) no-repeat center center;
    background-size:cover;
    max-width:768px;
    width:100%;
    height:100%;
}

Answer 2

You could always absolute position some divs over left and right with a higher z-index value.

I haven't ever used or seen any image cropping via css but you could definitely crop the image in paint or photoshop, upload both images, then swap out the image you want to show with css and possibly make use of media queries.