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％。正如您所看到的，小图像未被触及，巨大的图像被调整为合理的尺寸。

Answer 2

我建议您为图片设置max-width: 100% CSS属性。

这样可以防止图像的宽度扩大到大于容器的宽度。

如果您的图像垂直溢出问题，也可以对max-height: 100%执行相同操作。

请参阅此JSFiddle以获取示例。

（注意：如果直接在<img>标签上或在CSS文件中同时设置宽度和高度属性，则图像将不会按比例缩放。）

Answer 3

它是否必须是切换或鼠标悬停也适合您？

<style>

.FullSize { width:100px; height:auto; }

.FullSize:hover { width:90%; height:auto; }

</style>

<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">

注意：当图像在页面中变大时 - 周围的内容将在其周围移位 - 取决于您如何设置布局。

此外，如果您有任何正文边距或表格或div填充，则使用100％的图像宽度将使页面滚动。要检查只需将90％更改为100％并按上下工作。

您还可以强制将图像设置为特定大小，直到用户缩小浏览器/使用较小的分辨率。

<style>

.FullSize {width:1000px;max-width:100%;height:auto;}

</style>

<img src="Dependancy Charts/RotairAORFQ.png" class="FullSize">

小贴士：使用的图像必须是最大的图像。因此，最小宽度为1200像素宽（如果这是您使用的强制图像大小）。这样，无论大小如何，它都会比小图像变得更大更清晰。由于它是一个内联网，文件大小应该不是问题。

Answer 4

感谢大家的帮助。 Rob和Mike都指出了一个很好的解决方案。我现在使用适合浏览器窗口的图像加载页面，使用浏览器调整大小，如果用户感兴趣，可以扩展图像，并在必要时显示滚动条。我让它在一个函数中工作，因此每个页面都需要最少的代码。

加载图片：

<p style="overflow:auto;">
    <img src='Dependancy Charts/RotairAORFQ.png' width="100%" onclick='ImageToggle(this)'>
</p>

功能：

function ImageToggle(Image)
{
    if (ImageToggle.FullSize == 'undefined')
        ImageToggle.FullSize = false;

    if (ImageToggle.FullSize)
        {
            Image.style="max-width: 100%";
            ImageToggle.FullSize = false;
        }
    else
        {
            Image.style="max-width: none";
            Image.width=Image.naturalWidth;
            ImageToggle.FullSize = true;
        }

    return 1
}

Answer 5

如果你想获得当前的浏览器窗口大小，如果你想在点击事件上这样做，那么在jquery或javascript中试试这个：

<script>

$("#myButton").click(function(){
        var x = window.innerHeight;              // put current window size in x (ie. 400)
});

</script>

如何控制图像的大小

5 个答案: