javascript - 如何控制图像的大小

Question

我是一名熟练的 PC 数据库/应用程序程序员。我也是一个懵懂的html/javascript/web程序员。

我正在为我们的 Intranet 创建一些关于一些 .Net 程序集的文档。理想情况下，如果浏览器窗口适合它，我想显示完整尺寸的图像。如果不是，那么我想缩小它并通过单击在小版本和全尺寸版本之间切换。它是一个依赖关系图，可以针对不同的页面使用不同的大小。我更喜欢一个单一的功能来处理这个，但它是供我们使用的，我提到的要求都不是一成不变的。我想让它运行良好，但没有什么是强制性的。

我读了很多东西，但找不到任何符合我想要的东西。首先，我尝试了这个(经过几次迭代):

<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width=this.naturalWidth;this.height=this.naturalHeight;' ondblclick='this.src="Dependancy Charts/RotairAORFQ.png";this.width="100%";'>

它有问题。首先，它放大了一个小图像，看起来很有趣。其次，我必须将代码放在每一页中。第三，它需要双击才能恢复。我本来打算忍受那些短消息，但双击失败了。我不知道如何恢复它。

所以我试着变得花哨。我不知道如何解决问题 1，但通过在单独的文件中创建函数解决了问题 2 和问题 3。然后我遇到了同样的问题。这是我的第二次尝试:

function ImageToggle(Image)
{

    if (ImageToggle.FullSize == 'undefined')
        ImageToggle.FullSize = false;

    if (ImageToggle.FullSize)
        {
            Image.width='100%';
            ImageToggle.FullSize = false;
        }
    else
        {
            Image.width=Image.naturalWidth;
            ImageToggle.FullSize = true;
        }

    return 0
}

在我的页面中:

<img src='Dependancy Charts/RotairAORFQ.png' width='100%' onclick='ImageToggle(this)'>

我想做的能做吗？这听起来并非不可能。如果需要大量工作，则可以接受替代建议。

Answer 1

您可能对 max-width: 100% CSS 属性感兴趣，而不是简单的 width:100%。如果你有一个小图像，它会保持微小。如果您有一个巨大的图像，它会调整到包含元素的宽度。

例如:http://jsbin.com/kabepo/1/edit使用一张小图片和一张大图片，均具有最大宽度:100%。如您所见，小图像未受影响，大图像已调整为合理的大小。