HTML 图像大小和变量答案

【问题标题】：HTML Image Sizing and VariablesHTML 图像大小和变量
【发布时间】：2016-12-14 19:24:11
【问题描述】：

我正在使用一个名为 iDashboards 的应用程序，我可以在其中添加一个称为 ViFrame 的功能，该功能需要非常有限的 HTML 来创建自定义框架。

我对 HTML 的了解已经非常有限，而且没有输出反馈，很难将反复试验作为一种策略。

我正在尝试显示图像。图像会根据在应用程序中选择的人而改变。选择是自己处理的，但问题是图片的大小各不相同。我正在尝试显示图像，使其具有确定的高度和缩放的宽度。

显示全尺寸图像。 HEIGHT 元素似乎没有任何约束。如果我添加一个 WIDTH 标签，它可以工作，但缩放会搞砸。有什么方法可以做我想做的事吗？

在我看来，我有两个选择： 1. 将库中的每张图片都设为正方形，然后指定正方形尺寸，以免失真 2. 以某种方式将原始高度和宽度检索到 HTML 中的变量中，并指定两个标签，高度为常数，宽度为高度和宽度之间的比率的表达式。我所知道的这些都不可能。是吗？我不认为它允许标签进入 JavaScript。

对不起，我在 HTML 方面的基本知识，请温柔一点。

【问题讨论】：

【解决方案1】：

您是使用一个对象并更改图像还是使用多个图像并更改显示哪一个？您可以尝试在 css 文档中使用 width:YOUR_VALUE_HERE; height:auto 的任何方式，这应该使它们保持相同的比例。

【讨论】：

它没有给我 CSS 文档。应用程序通过匹配 X 轴数据来处理图像更改。当您在 HTML 中看到宏行 "IMG SRC="${content}/SamplePeople/${value:Image}" HEIGHT="75">" 时，这是因为应用程序正在经历每次刷新并匹配当前选定的行并从“图像”中获取值以完成路径。
你能粘贴你用来显示图像的代码吗？
员工

现在可以了。
试试：<IMG SRC="${content}/SamplePeople/${value:Image}" HEIGHT="auto" WIDTH="100px">
当我使用它时，它会去掉 HEIGHT 组件并将 WIDTH 设置为“100”，这又给了我完整尺寸的图片。切换时也一样。

【解决方案2】：

在 IMG 标签上设置一个特定的类：

<img class='constrained_img' src='/path/to/img.png'>

在您的 CSS/样式表中：

.constrained_img {
    max-width:100px;
    max-height:100px;
 }

在这种情况下，您的高度和宽度应该不超过 100 像素。您需要进行服务器端处理的任何进一步工作（如 PHP 的 getimagesize()），或使用第 3 方库（我使用 Joseph Lencioni 的 SLIR 效果良好），或使用 JavaScript（这是' 不是不可能，但我不知道该怎么做。

【讨论】：