动态缩放图像以适合指定的大小宽度和高度

Question

所以经过广泛的研究和大量的jQuery和Javascript解决方案,我根本无法找到一种方法来动态地将图像水平和垂直地缩放到指定的大小,我发现大量的信息有关缩放以适应宽度并保持纵横比,或缩放以适应高度并保持纵横比,但无法确定图像是太高还是太短并相应调整.

所以在我的例子中,我有一个<div>设置宽度为460px,设置高度为280px,我需要图像适合,所有这些都没有拉伸(保持其纵横比)

Answer 1

现在,在摆弄了一些宽度的例子后,我的经典代数技巧开始了.

如果我取宽度并将其除以高度,那么在这种情况下,460/280你得到1.642 ...这是该区域的宽高比,现在如果我看一下图像的宽高比,我知道如果它大于1.642 ......这意味着它比区域宽,如果图像的纵横比小于,那就更高了.

所以我想出了以下内容,

// Set the Image in question
$image = 'img/gif/b47rz.gif';

// Set the width of the area and height of the area
$inputwidth = 460;
$inputheight = 280;

// Get the width and height of the Image
list($width,$height) = getimagesize($image);

// So then if the image is wider rather than taller, set the width and figure out the height
if (($width/$height) > ($inputwidth/$inputheight)) {
            $outputwidth = $inputwidth;
            $outputheight = ($inputwidth * $height)/ $width;
        }
// And if the image is taller rather than wider, then set the height and figure out the width
        elseif (($width/$height) < ($inputwidth/$inputheight)) {
            $outputwidth = ($inputheight * $width)/ $height;
            $outputheight = $inputheight;
        }
// And because it is entirely possible that the image could be the exact same size/aspect ratio of the desired area, so we have that covered as well
        elseif (($width/$height) == ($inputwidth/$inputheight)) {
            $outputwidth = $inputwidth;
            $outputheight = $inputheight;
            }
// Echo out the results and done
echo '<img src="'.$image.'" width="'.$outputwidth.'" height="'.$outputheight.'">';

它运作得很好,所以我想我会分享,希望这有助于一些人