9

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

所以在我的例子中，我有<div>一个设置宽度为 460 像素，设置高度为 280 像素的图像，我需要图像完全适合该区域而不拉伸（保持其纵横比）

4

2 回答 2

28

现在，在摆弄了一些宽泛的例子之后，我的经典代数技能开始发挥作用。

如果我把宽度除以高度，那么在这种情况下，460/280 你反过来得到 1.642... 这是该区域的纵横比，现在如果我查看图像的纵横比，我知道如果它大于 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.'">';

它工作得很好，所以我想我会分享，希望这可以帮助一些人

于 2012-06-18T19:24:29.100 回答
3

如果我正确理解您的问题，我更简单的缩放图像的方法是使用以下 CSS 样式规则：

max-width
max-height

这两个样式规则允许您指定图像的最大宽度/高度。浏览器将缩小图像（保留纵横比）以适合您指定的大小。您还可以使用这两个来指定图像的最小宽度/高度：

min-width
min-height
于 2012-06-19T10:24:07.510 回答