Responsive Img that reaches min width and then crops?

[deldalton]

I have an image with the following css properties.

 

img.mainImg {

width: 100%;

height: auto;

max-height: 1000px;

}

This causes the img to resize with the browser window, while keeping it's height to width ratio. This is almost the desired effect.

 

What I am trying to achieve, however, is for the image to stop resizing once it has reached a certain width, and then start to crop the image instead.

 

Can this be achieved with CSS, using media queries?

[deldalton]

I think I've found what I'm looking for. I'll post my findings, if they turn out to be any good!

[deldalton]

Okay. So, I've wrapped the img in a div that has a maximum height defined, and overflow set to hidden. As I want it to be cropped at the sides, I've also had to amend the img css properties. These are applied by a media query, based on screen having a maximum width of 700px.

 

#cropDiv {

max-height: 300px;

overflow: hidden;

}

 

img.mainImg {

width: auto;

height: 220px;

max-width: 1000px;

}

 

 

So, now, when the browser window goes to 700px or smaller, in width, the height of the img is locked and it then begins to be cropped.

 

Unfortunately, I'm now stuck trying to figure out how to get it to crop evenly from both sides. At the moment, it only crops from the right hand side.

 

Does anyone know how to do this?

[davej]

Well, I'm not clear on what you are doing. It sounds like this is a foreground image? I think cropping from one side is pretty normal because scroll bars appear and you can then scroll if you want to. You could certainly center the image using Javascript.

Edited February 21, 2014 by davej

[deldalton]

DaveJ. Sorry. I appreciate that it can be difficult to follow without a working example.

 

Here's a quick CodePen: http://codepen.io/deldalton/pen/CkDeb

 

It's not perfected, but it's good enough as an example.

 

You'll see that when the browser window is resized, the image also responsively resizes proportionally. Once the browser window reaches 700px in width, the image has a set width, along with the div it's contained in, with the overflow hidden. So, as you continue to shrink the browser window width the image no longer responds and instead is simply 'cropped' from the right.

 

However, as the image is cropped the center of the image loses focus, as it's no longer in the center. I would like the image to appear to remain centered, so that it is cropped from both the left and right side of the browser.

 

I hope I that explanation is clear. Please let me know if I need to clarify anything.

 

I'm hoping for a pure HTML/CSS solution. It's just a preference. If JS is the only way to go then that's fine.

[deldalton]

An alternative, would be to load an image that has already been cropped to size. But, of course, that would require multiple image requests. Which is a terrible idea. So, ultimately, the only practical solution is to manipulate the image.

 

Is that possible with CSS or do I have to use JS?

[deldalton]

I've come across a pure CSS solution coined as the Focal Point Framework by Adam Bradley.

 

Out of the box, you specify a Focal Point and then as your browser window resizes the image responsively resizes but at the same time it focuses on a particular area within the image and then faux crops the image around that focal point.

 

I'd like to adjust this solution so that the image isn't resized but that the cropping still applies, around the specified focal point.

 

I'm struggling to work it out.

 

Is there anyone here familiar with this Framework or with just CSS in general who might be able to give me a few pointers?

Edited February 21, 2014 by deldalton

[davej]

Your Codepen link is not responding for me right now so I don't know. This GitHub thing by Bradley sounds similar to what you want to do. I would think that the Javascript to scroll a page according to page resize events would be pretty simple, although as usual IE probably requires something extra.