Crop and scale a specific region of an image using CSS (responsively) - html

Question

I'd like to show the user a specific part of an image. Ideally, I'd be able to crop the image on the server, but I'm unable to do so for this application. I'd like a solution that appeared to the user as if the image were in fact cropped on the server, such that it could scale properly as its containing elements got bigger or smaller.
Concretely, say my image is 200px wide by 300px high, and I'd like to show the region of the image that goes in x from 0px to 200px, and in y from 75px to 225px. Therefore I'd want an 'effective image' of size 200px wide by 150px high.
I'm assuming that this will involve background-position and size, but I'm unable to figure out how to use these such that I can:
Show ONLY the desired region of the image.
Can be placed in a container with a fluid width (e.g. width: 50%) and have the size change accordingly.
I've included an example of what I've tried so far here:
http://codepen.io/anon/pen/maCvd
The example has the uncropped image, scaling to the size of its container, which is 75% of 100px. It also shows what I'd like to effectively get out of the CSS -- something equivalent to the physically cropped image, which can also scale to the size of its parent.
It shows my attempt at using background-size, which as you can see, does not scale to the size of its parent.
Thanks for any help!

Answer 1

The only way i can think of doing this is using the clip property. Unfortunately, this can only be applied to inline images that are positioned absolutely.
So, based on the question:
Codepen Example
HTML
<div class="wrapper">
<img class="clipper" src="http://lorempixel.com/output/city-h-c-200-300-8.jpg"/>
</div>
CSS
.wrapper {
width:50%;
height:350px;
margin: 10px auto;
border:1px solid grey;
position: relative;
}
.clipper {
position: absolute;
top:-75px; /* same as top clip */
left:0;
/* top, right, bottom, left */
clip:rect(75px,200px,225px,0px);
}