How can I achieve similar images to Medium.com's Feature Headers? (Cropped Images)

Question

Can anyone workout how medium.com does thier feature header image cropping?

I've tried looking online - but I haven't found anything really. It's the only responsive image resizing solution of its type (that I've personally come across).

I'd be very interested in any ideas - If it's any help - the system they employ is very, very bad for portrait images - it's obviously only built for landscape.

Feature Header Example

---

Scaling Comparison Shot

Compare the top, and bottom image (both the exact same) - notice that the top image has a 10%~ crop on the top and bottom - but the width remains unchanged.

A static 10%~ works okay for this image - but with another, it produces something vastly different, making me think that the width/height/aspect ratio are tied to the cropping percentage.

---

Short Video showing the scaling process in action

Tehan + Lax

---

CSS

Currently this is the code I am using (just wanted to test percentages). The image sits inside the div named image, that uses an overflow hidden, and the image uses padding top/bottom to 'crop' it.

.image {  
    height: auto;
    width: 100%;
    overflow:hidden;   
}

.image img {
    height: auto;
    width: 100%;
    margin-bottom: -11%;  
    margin-top: -8%;
}

Answer 1

you can check these tuts and use skrollr.js

Basically use css and javascript to control the images and behavior

http://bassta.bg/2013/12/medium-com-like-blurred-header-effect/

http://ihatetomatoes.net/how-to-create-a-parallax-scrolling-website/