Calculate Imagedimensions on the basis of surface area and ViewportDimensions, - need a Maths-Expert :-)

[horst]

Hi everyone.

I'm coming to an old thema of mine. When it comes to present different sized and different orientated images on screens, it is always a bit frustrating.

Maybe most time (on desktop) there is a landscape oriented widescreen, on which you can show a panorama image (2:1) very large but that it fits into the viewport.

If you want to show a square image (1:1) you only have the half (content/amount?) of surface area. (The image only has half superficial content).

And if you want show a Portrait (maybe 2:3) this image is somewhat more smaller displayed than the square one.

So, I'm searching for some math that calculate dimensions depending on a equivalent superficial content and depending on the available viewport.

Puh!

 

But maybe it also shouldn't be a (technical) linear one. when downsizing the panorama to an equivalent, it looks a bit poor, alone in the viewport.

For example, with the width and height of an image one can create a superficial content number: 100 is a square, 200 is a 2:1 and so on:

    1:1 = 100
    5:4 = 125
    4:3 = 133
    3:2 = 150
    2:1 = 200
 

Is there anybody on the forums who can build a elegant maths formula for that?

Or there are other suggestions, thoughts to that?

[Soma]

1 + 2 = 3?

I understand what you mean but can't really see what the problem is and why not just serve images with a maximal width or height depending on what ratio width and height you have. Hard to explain for reason, there's no bulletproof way, what if you resize the viewport from landscape to portrait?

[horst]

   My problem is exactly that I don't want serve, for example, all images with a max width, because then an image with 2:1 is three times larger than one with 2:3, or has double surface area of a square image. So it appears to be much more important than the smaller displayed ones.

What I need is a formula that calculates the equivalent surface area depending on the viewport for different images.

For example you have three images

        w   x    H

A  3000 x 1800 px   

B  2300 x 2300 px

C  1500 x 2000 px

the max useable viewport is 600 x 600, how would you calculate the new dimensions for the three images, so that they all fit into the viewport and have all a equivalent surface area?

[Soma]

You misunderstood what I meant with max width. I meant the width of the larger viewport side. So maybe what you have in mind already. It was just a little confusion what the desired result is with all those screenhots . I'm just curious what you plan to do if ratio/orientation changes or if images have extreme ratios? Meaning to calculate the space of the area and resize the images according to that may result in having a image larger than viewport...

Well I once I had such a calculation (can't remember exactly) It should be pretty easy to get a max width or height depending on orientation ratio.

$vw = 600;
$vh = 600;
$spacing = 50;

$images = array(
    array(3000,1800),
    array(2300,2300),
    array(1500,2000)
    );

$ratio = $vw/$vh;
if($ratio < 1) { // portrait
    $max = $vw - $spacing;
} elseif($ratio > 1){ // landscape
    $max = $vh - $spacing;
} else { // square
    $max = $vh - $spacing;
}

foreach($images as $im) {
    if($im[0] > $im[1]) { // landscape image
        echo "w: ". $max . " h: " . round($max/$im[0] * $im[1]) . "<br/>";
    } elseif($im[0] < $im[1]) {// portrait
        echo "w: ". round($max/$im[1] * $im[0]) . " h: " . $max . "<br/>";
    } else { // square
        echo "w: ". $max . " h: " . $max . "<br/>";
    }
}

And this would be a area square calculation and you'll quickly see what I mean.

$vw = 800;
$vh = 600;

$images = array(
    array(3000,1500),
    array(2300,2300),
    array(1500,2000)
    );

$area = $vw*$vh;

echo "area: " . $area . "<br/>";
foreach($images as $im) {
    $r = sqrt($area/($im[0] * $im[1]));
    $w = floor($im[0] * $r);
    $h = floor($im[1] * $r);
    echo "w: ". $w . " h: " . $h . " (area = " . ($w * $h) . ")<br/>";
}

[horst]

You misunderstood what I meant with max width. I meant the width of the larger viewport side. So maybe what you have in mind already. It was just a little confusion what the desired result is with all those screenhots .

Ah, ok!

I'm just curious what you plan to do if ratio/orientation changes or if images have extreme ratios? Meaning to calculate the space of the area and resize the images according to that may result in having a image larger than viewport...

Hhm, yeah, that's exactly the point what I meant with

the max useable viewport is X * Y,

how would you calculate the new dimensions for the three images,

so that they all fit into the viewport and have all a equivalent surface area?

  it is shown in the second screenshot:

----------------

Yeah, and what can be done when images are (pre)loaded and the user resizes the window? Good question. Til now I have only the solution to use some javascript to keep track of viewport-sizes and imagesizes, and if the viewport resizes somehow smaller it's ok, just display images smaller too. But if it changes orientation extremly or switch from a small window to fullscreen, puh, I have to reload!

But how to reload only the images that needs to be displayed larger than the first downloaded version, I haven't solved it yet.

[horst]

Soma, your maths is good!

- only it has to result in images that all fit into the viewport.

I think, one has to decide which is the max landscape ratio image dimensions and which is the max for portraits that one want take care of:

2:1 for landscape and 2:3 for portraits, for example,

than one has to calculate the area(s) for the smaller (?) one of them (depending on viewport) so that they fit into it.

After that, one has to calculate all images that are between 2:1 and 3:2 that they get close to that area.

Extreme ratios get smaller, but this ones are rare.

This is a linear solution!

This may lead into small and poor looking images on large canvas, so one have to find something between the linear equivalent version and one that takes into account the single image presentation and shows landscapes in a landscape-viewport a bit larger, and portrait-images in a portrait-viewport a bit larger.