生成html页面的C#程序-限制页面上的图像尺寸

Question

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

实现这一点的最简单方法是通过 html 本身...如果我可以在 html 中设置某种“maxwidth”或“maxheight”属性，或者可能是一种强制图像适合表格单元格的方法（如果我使用这样的东西，我必须确保无问题的尺寸会自动随着正在减少的尺寸而缩放）。问题是，我对 html 中的这种“微调”之类的东西了解不多，而且谷歌搜索似乎是一件很难的事情（大多数解决方案都涉及某种 html 专业化；我只是使用纯 html）。

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

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

Answer 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 等浏览器上进行一些测试。但我不知道，你可能只是想硬着头皮让程序来处理它。

Answer 2

宽度和高度属性代码>标签。如果您只指定一个，浏览器将按该尺寸调整大小并保持宽高比。

Answer 3

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

Answer 4

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

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

我不鼓励您无知地使用 CSS 的 max-width 和 max-height 属性，因为您会失去纵横比。

Answer 5

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

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

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

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;
}

Answer 6

如果仅设置 元素的 width 或 height 属性之一（不能同时设置，否则不起作用），图像将保持宽高比，您未设置的其他值将自动调整。