Question

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

我对HTML的了解非常有限，没有输出反馈，很难将反复试验用作策略。

我试图显示图像。图像的变化取决于在应用中选择的人。选择由它自己处理，但问题是图片的大小各不相同。我试图显示图像，使其具有一定的高度和缩放的宽度。

显示完整尺寸的图像。 HEIGHT元素似乎并没有限制任何东西。如果我添加一个WIDTH标签它可以工作，但缩放将搞砸。有什么办法可以做我想要的吗？

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

对于我对HTML的基本知识感到抱歉，请保持温和。

Answer 1

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

Answer 2

在IMG标记上设置特定类：

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

在CSS /样式表中：

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

在这种情况下，应保持高度和宽度不超过100px。你需要做任何进一步的工作来进行服务器端处理（一个PHP的getimagesize（）），或者使用第三方库（我已经使用了Joseph Lencioni的SLIR效果很好），或者使用JavaScript（这不是不可能，但是我不知道怎么回事。