Question

我正在开发一个数据库项目并且遇到了一个美容障碍。

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

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

然而，这是我的问题，并非所有图像都具有相同的尺寸（如宽度和高度）。我的代码设置指定图像的特定区域以阻止它填满屏幕，而不是缩放它，代码只是简单地搜索或拉伸尺寸。因此，正在调整大小的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代替高度和宽度，并将黑色背景应用于图像容器。您还必须将图像水平和垂直居中放置在容器中。通过将容器的行高设置为高度并使用text-align。

来完成此操作

<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来完成。

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

1 个答案: