dinsdag 1 juli 2014

Resizing, cover, center, fit

When you work with pictures and layouts this problem seems to crop up every time:
How do you handle content that doesn't fit?
With the mobile devices ranging from 16:9 to 4:3 and with strange formats like 3:2, 16:10, 5:3, 8:5 etc
this is becoming a more and more pressing matter.

It's like when your TV tries to fit a 4:3 image in a 16:9 container. Almost all solutions given by my remote control suck completely, why is that? In my book there are only two options:


  1. You want to see everything (fit) 
  1. You don't want the famous black bars. (cover). For instance if you have a decorative movie about a fire, or clouds, anything that is more atmosphere than content.
http://jsfiddle.net/rRE5L/
Cover exactly (centered) code:
http://jsfiddle.net/rRE5L/1/

So I've been fiddling a bit.. You can set the original size and the box size to see what happens in the different scenarios.

Fit exactly code:

But I'd like to have something a little more precies. I'd like to be able to set a box inside the image, that tells us which part of the image is important. That way we can make it fit the container in the best possible combination of the above solutions AND the script can figure out what that needs to be itself from just that data for EVERY container.
I'd like my script to be intelligent enought to arrive at the conclusions above without further assistance.
So it would try to cover as much as possible, using as much of the picture we can show. Unless that means the important bit gets cropped. In that case it will FIT the important bit (and if that means you end up with bars, so be it. It will center the result, to have the bars nice and even.

Now this is not really a solution for TV's any more, because on a tv screen the important bit moves around. But if your problem is you want to watch a movie with subtitles and still see as much of the movie as possible, it would be a solution. So TV-manufacturers pay attention, I want this on my next one!!!

I'll get back with a fiddle on that soon enough..

Geen opmerkingen:

Een reactie posten