Define art direction that can be scaled ( responsive image, just one image )

[Illustrathor]

Hi,

I have a bit of an unusual task for my school.
I have one single image ( 3000×2000 ) from which certain areas at specific breakpoints ( <320, <1024, >1024 ) should be visible ( art directed ). The Problem is, cropping the image in PS and showing different images at different breakpoints is not allowed, it has to be the same picture everytime with different art directions.
For example, a part of the image with the size of 1500x1000px should be visible between 321 and 1024 and another part with 600x800px visible at and below 320.

The option using margins and overflow wouldn’t work because a margin of -500px at a screensize of 320 shows not the same as at 800. Furthermore, there would be additional scaling needed, which would make the whole thing quite messy.
And Frameworks like Focal Points are not accurate enough with these 12×12 grid system.

So, I need to find a way to specify a specific section of an Image, lets take the 1500×1000 part, that will keep its art direction while scaling always to 100% width between the break points.

Any Help or advice would be highly appreciated

[Paulie_D]

Sounds like a case for a wrapper with overflow:hidden and an absolutely positioned image.

I’m a little unclear on what the “1500×1000 part” actually refers to though.

Is the starting at the top left or from the center?

Also

For example, a part of the image with the size of 1500x1000px should be visible between 321 and 1024

If it’s that big it won’t fit on the screen. I think you need to clarify what exactly it is you are trying to do.

[Illustrathor]

Thought about it too, to use a wrapper around it which I could set to 100% width while placing an image inside it in another wraper to define the art direction. But I thought, there has to be a simpler and cleaner way than that.

The image is 3000x2000px, from this Image, I have to take an area with the size by 1500×1000 px ( neither at one side nor the center ).
This Area must than scale freely between viewports 321 and 1024. At 320 and 1025 are the other breakpoints, at which other Areas of the original image have to be visible and scale depending on the devicewidth as usual.

EDIT:

I created a small example what I try to accomplish:

http://s32.postimg.org/mttr859vp/example.jpg

On the left there is a example image, the original cannot be used to show what I mean, but whatever.
From this big image I need a certain area that is visiple between the viewport breakpoints between 321 and 1024 and will fluidly scale between those two

[Beverleyh]

The art-direction thing can make or break a design, so its great that you’re taking it into consideration :)

I think its all too easy to go down the max-width:100%; route, which works brilliantly in lots of cases, but for those times when you want to fine-tune your focal points and image proportions, I’ve found Method #3 from this write-up to be very useful http://www.dynamicdrive.com/forums/entry.php?293-3-Ways-to-Resize-Scale-Web-Images-in-Responsive-Design
(its the top demo in this side-by-side example http://fofwebdesign.co.uk/template/_testing/scale-img/scale-img.htm)

[Illustrathor]

Thanks for the example Beverleyh.
I was planning to use the “Fixed Ratio Resize” from your example because the art direction has to stay unchanged, so there is no other solution.
The art direction itself is Set for every breakpoint ( <320, <1024, >1024 ) but my problem is to find a way to define the art direction to a very specific area of the much larger image and keep that exact area throughout the scaling, as you can see in the rough sketch ( http://s32.postimg.org/mttr859vp/example.jpg ).

[Beverleyh]

Sorry – Work web filters are blocking your image so I can’t see the sketch :(

Just thinking out loud – Would you be able to customise the background-position in different media queries?

[Beverleyh]

OK – I can see your pic now.

Yes, the “Fixed Ratio Resize” and “Target Ratio Resize” methods can both be modified to your needs (what I’m interpreting to be your needs, anyway). Its just a question of understanding the behaviour of the CSS properties and tweaking the values to get it to do what you want, most notably the ‘background-size’ property, which you’ll not want as ‘contain’ – you’ll want to use a fluid % value instead. And adjust the padding-top to whatever ratio you need. e.g This example uses a 1920 x 1180 wallpaper that is cropped in to show only the upper-right corner http://codepen.io/anon/pen/MeaZaz

[Illustrathor]

Oh damn, I could kiss you ;D
This helps a lot, thank you very much Baverleyh, I can work with that. awesome.

[Author]

Posts