php - 缩放通过数据库导入的图像

Question

我正在从事一个数据库元素，但遇到了装饰性障碍。

我有一个数据库，该数据库将配置文件加载到数组中以使用 php while 循环进行显示，因此它被设置为显示数据库的内容并允许添加而无需额外编码。

其中四个字段是图片上传位置，作为上传过程的一部分，最多可以上传 4 张不同的图像，然后将这些图像保存在一个目录中，并将它们的路径保存到配置文件数据库中。

然而，这是我的问题，并非所有图像的大小都相同(如宽度和高度)。我设置了我的代码，为图像指定一个特定区域以阻止它填满屏幕，而是缩放它，代码只是压缩或拉伸(stretch)尺寸。因此，调整大小的 80*120 图像只是被扭曲了。

这是负责将图像调用到字段中的代码部分。

<div id="wb_Text2" style="position:absolute;left:10px;top:<?php echo $imagepix ?    >;width:100px;height:120px;z-index:5;text-align:left;">

<span style="color:#000000;font-family:Arial;font-size:15px;"><img src="uploads/<?php     echo $productpicture ?>" alt="" style="width:70px;height:120px;" ></span></div>

第一部分是容器的修饰对齐，第二部分导入图像并相应地设置格式。

我正在使用 style= 部分来调整大小，但这显然是错误的方法，而且我找不到任何有用的信息来说明我到底在寻找什么，因为知道要问什么就成功了一半!

最终结果是能够通过简单地改变输出字段上的比率(例如将样式更改为 style="width:140px;height:240px")来缩放图像以满足各种要求

我希望这是有道理的，并且有人有一些见识。

谢谢

Answer 1

您可以使用 max-height 和 max-width 代替高度和宽度，并将黑色背景应用于图像容器。您还必须将图像水平和垂直居中放置在容器中。为此，请将容器的行高设置为等于高度并使用文本对齐。

<div id="image-container" style="width: 70px; height: 120px; text-align: center; line-height: 120px; background: black;">
    <img src="image.jpeg" style="max-height:120px; max-width: 70px; display: inline-block;" />
</div>

当然，您应该将样式标签放入样式表中。

如果您更愿意裁剪图像而不是让它适合黑色背景，请告诉我，因为这也可以使用 CSS 和一些 JavaScript 来完成。