0

我有一个 C# 程序，它根据我存储在文件系统上的各种数据和图像生成大量 html 页面。html 本身工作得很好，但图像的尺寸可能会有很大差异。我需要一种方法来确保给定图像不会超过页面上的特定大小。

完成此任务的最简单方法是通过 html 本身......如果我可以在 html 中设置某种“maxwidth”或“maxheight”属性，或者可能是一种强制图像适合表格单元格的方法（如果我使用这样的东西，我必须确保非违规维度会自动与正在减少的维度一起缩放）。问题是，我对 html 中的这种“微调”类型的东西知之甚少，而且对于谷歌来说这似乎是一件困难的事情（大多数解决方案都涉及某种 html 专业化；我只是使用纯 html)。

或者，我可以在运行时通过检查 C# 中的图像来确定每个图像的宽度和高度，然后如果图像的尺寸超过某个值，则在 html 中设置宽度/高度值。这里的问题是，将整个图像加载到内存中似乎是非常低效的，只是为了获取它的尺寸。我需要一种方法来“窥视”图像并获取其大小（可以是 bmp、jpg、gif 或 png）。

对于任何一种方法的任何建议都将不胜感激。

4

6 回答 6

1

如果您担心处理图像大小重新计算的程序，可以选择将负担推到浏览器上。你可以使用javascript。此脚本会将图像“调整”到客户端的最大高度/宽度为 200 像素。

<script type="text/javascript" language="javascript">
    function img_resizer(img) {
        width = 0;
        height = 0;
        if (img.offsetWidth) {
            resizeImage(img.offsetWidth, img.offsetHeight)            
        }
        else {
            resizeImage(img.style.pixedWidth, img.style.pixelHeight);
        }
    }

    function resizeImage(width, height) {
        if (width > 200 || height > 200) {
            if (width > height) {
                height = (height / width) * 200;
                width = 200;
            }
            else {
                width = (width / height) * 200;
                height = 200;
            }

            img.style.width = width + 'px';
            img.style.height = height + 'px';
        }
    }
</script>

<img src="screen.jpg" onload="img_resizer(this)" />

我知道这适用于 IE 和 Firefox，您可能需要在 Safari、Opera 和 Chrome 等浏览器上进行一些测试。但我不知道，你可能只想硬着头皮让程序来处理它。

于 2010-04-02T01:04:11.127 回答
0

标签有一个宽度和高度属性。<img>如果您只指定一个，浏览器将在该维度上调整大小并保持纵横比。

于 2010-04-01T22:05:20.600 回答
0

CSS 有max-width和max-height属性。所有流行浏览器的最新版本都支持它们。

于 2010-04-01T22:06:15.357 回答
0

那里没有计算复制和粘贴的数量，嗯！我也想知道这一点，我看到的只是缩放宽度或高度的无穷无尽的例子......谁想要另一个溢出？！

  • 无需循环即可调整宽度和高度
  • 不超过图片原始尺寸
  • 使用正常工作的数学，即高度的宽度/方面，宽度的高度*方面，因此图像实际上可以正确地上下缩放：/

//////////////

private void ResizeImage(Image img, double maxWidth, double maxHeight)
{
    double srcWidth = img.Source.Width;
    double srcHeight = img.Source.Height;

    double resizeWidth = srcWidth;
    double resizeHeight = srcHeight;

    double aspect = resizeWidth / resizeHeight;

    if (resizeWidth > maxWidth)
    {
        resizeWidth = maxWidth;
        resizeHeight = resizeWidth / aspect;
    }
    if (resizeHeight > maxHeight)
    {
        aspect = resizeWidth / resizeHeight;
        resizeHeight = maxHeight;
        resizeWidth = resizeHeight * aspect;
    }

    img.Width = resizeWidth;
    img.Height = resizeHeight;
}
于 2011-04-13T20:08:08.233 回答
0

根据您所说的（以及一些假设，例如您将多次使用单个图像），似乎在内存中缓存图像的尺寸将是提高效率的一件事。这样做，然后您可以智能地在 HTML 或 CSS 中设置尺寸。

有关如何获得分辨率的说明，请参阅此问题（如果您还不知道这一点 - 不幸的是，我不知道如果不加载整个图像就无法做到这一点）。我鼓励您将该图像变量保存在一个非常小的范围内并尽快处理它。

我会劝阻你不要无知地使用 CSSmax-width和max-height属性，因为你会失去你的纵横比。

于 2010-04-01T22:12:00.167 回答
0

如果您只设置元素的一个属性：widthOR height（不是两者，否则它将不起作用）<img>，图像将保持纵横比，而您未设置的其他值将自动调整。

于 2012-04-17T13:27:38.703 回答