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

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

如果我理解正确的话你想保持这个比例。那么为什么不使用一些图像库来缩放图像的高度或宽度并保持比例。

Answer 3

如果我固定它们的高度和宽度，它们会显得拉伸吗？

如果改变比例，它们就会扭曲；如果改变大小，它们就会拉伸。

如果我固定它们的宽度，并且图像的高度很长，那么它也会弄乱整个网站。

图像将缩放，保持其原始 xy 比例。这是否“搞乱网站”取决于上下文。

如果我固定它们的高度，并且如果图像的宽度很长，那么它也会弄乱整个网站。

同上

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

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

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

• 裁剪图像（可能在缩放后）
• 计算图像的 xy 比率，将其与您想要放置的空间的 xy 比率进行比较在中，使用它来决定将其缩放（同时保持纵横比）到空间的宽度或空间的高度。

Answer 4

尝试将输出图像适合（保持纵横比）在特定的矩形中怎么样？

Answer 5

您可以将 div 与 overflow:hidden; 一起使用。