有没有一种方法可以动态定义图像在页面或特定布局中的显示方式？

Question

很多时候，我都遇到过管理高度或宽度异常长的图像的问题。

如果我固定他们的高度和宽度，他们会看起来很紧张吗？

如果我固定他们的宽度，如果图像的高度很长，那么也会把整个网站搞得一团糟。

如果我固定他们的高度，如果图像的宽度很长，那么也会把整个网站搞得一团糟。

保存在本地驱动器中的图像将保持该比例吗？假设用户决定上传图像1(高)*32(宽)。当他上传这张图片时，脚本会将用户上传的图片调整到高度:1000px(只是一个例子)

所以得到的图像是1000px(高)*32000(宽)，你可以看到现在的图像异常大。

现在，在1000px * 1000px的框中显示此图像时，显示此图像的最佳方式是什么？

Answer 1

如果您尝试调整32x1图像的大小，使其适合1000x1000框，则不应将高度调整为1000。相反，应将宽度调整为1000，将高度调整为1000/32。

一些示例代码可能是：

define(MAX_WIDTH, 1000);
define(MAX_HEIGHT, 1000);

if ($cur_width / MAX_WIDTH > $cur_height / MAX_HEIGHT)
{
   $new_width = MAX_WIDTH;
   $new_height = (int) ($cur_height * MAX_WIDTH / $cur_width);
}
else
{
   $new_width = (int) ($cur_width * MAX_HEIGHT / $cur_height);
   $new_height = MAX_HEIGHT;
}

这将检查哪个尺寸相对于长方体的尺寸“更大”，并相应地设置$new_width和$new_height。确保处理奇怪的情况，其中一个维度被四舍五入为0(即一个10000x1的图像可能会以1000x0结束。

Answer 2

如果我固定他们的高度和宽度，他们会看起来很紧张吗？

如果更改比例，它们将变形，如果更改大小，它们将被拉伸。

如果我固定了它们的宽度，如果图像的高度很长，那么也会把整个网站搞得一团糟。

图像将缩放，保持其原始的x-y比率。这是否“搞乱了网站”取决于上下文。

如果我固定他们的高度，如果图像的宽度很长，那么也会把整个网站搞得一团糟。

同上

解决这个问题的最好方法是什么？

这取决于许多因素，尤其是图像的目的是什么。是的，我们又回到了上下文中。

如果我对你想要实现的目标做一些假设，你基本上有两个选择：

• 裁剪图像(可能在缩放图像的x-y比率之后，将其与要放置的空间的x-y比率进行比较，使用该比率来决定是否将其缩放(同时保持纵横比)以适应空间的宽度或高度。

Answer 3

如果尝试将输出图像拟合(保持纵横比)在特定的矩形中呢？