根据用户屏幕分辨率调整 <asp:Image> 大小答案

【问题标题】：Resize <asp:Image> based on users screen resolution根据用户屏幕分辨率调整 <asp:Image> 大小
【发布时间】：2011-12-30 08:35:43
【问题描述】：

我想在屏幕上显示图像，必须调整其大小（高度和宽度）以适合屏幕（拉伸或收缩）。图片已保存到服务器，尺寸为 1024 x 768（示例）。

所以，目前，我这样做：

ImageUtilities.Dimension d = 
    ImageUtilities.ImageUtilities.GetImageSize(f.FullName);
var newD = ImageUtilities.ImageUtilities.GetResized(d.Height, d.Width, 520, 520);
Image1.Height = newD.Height;
Image1.Width = newD.Width;

因此，目前，我强制我的图像适合 800 x 800 的正方形（我考虑了纵向与横向，并使用比例来保持纵横比。

问题是，在低分辨率屏幕上，用户必须滚动一点才能到达图像底部（我有一个关闭按钮）。在非常高分辨率的碎石上，我可以将 1024 x 1024 保持为可用区域。

有没有办法获取屏幕分辨率，并将这些参数带入我的代码背后的方法（GetResized 是一个返回新高度和宽度的方法）？

我了解用户可能没有将其浏览器最大化 - 没关系。

【问题讨论】：

你应该使用 css insted 在服务器上使用 C# 进行操作
我想这样做，但不知道怎么做。

标签： c# asp.net imaging

【解决方案1】：

您可以按百分比定义图像大小，这样您就可以摆脱这些东西了。

【讨论】：

这本来是最好的主意 - 但我用来显示图像的控件 (leandrovieira.com/projects/jquery/lightbox) 采用了我想要显示的图像的 URL，但没有给我选项调整它的大小，或者在上面加上一个百分比 - 我可以找到。

【解决方案2】：

使用 Javascript 获取监视器屏幕分辨率，然后在 javascript 中更改图像大小，或者将屏幕分辨率传递给您的代码，然后使用 C# 更改图像大小。

【讨论】：

【解决方案3】：

如果您需要有关屏幕分辨率的信息，您可以使用window.screen 它具有以下属性：

Properties  | Description

availHeight | Specifies the height of the screen, in pixels, minus interface     
            |     features such as the taskbar in Windows.
availWidth  | Specifies the width of the screen, in pixels, minus interface 
            |     features such as the taskbar in Windows.
colorDepth  | The bit depth of the color palette available for displaying images 
            |     in bits per pixel.
height      | The total height of the screen, in pixels.
pixelDepth  | Display screen color resolution (bits per pixel). Firefox  
            |     exclusive property.
width       | The total width of the screen, in pixels.

【讨论】：

这是 Javascript 属性？如何让它们进入我的代码背后？

【解决方案4】：

正如其他人提到的，最好在客户端而不是服务器端处理此类场景。我建议使用 CSS 样式或 JavaScript。

更多信息：

【讨论】：

【解决方案5】：

您是否考虑过创建一个根据屏幕分辨率调整图像大小的自定义服务器控件？以下示例将 MaxWidth 属性添加到 Image 控件，但您可以对其进行修改以将最大宽度/高度设置为与屏幕分辨率成比例：

using System;

使用 System.Web；使用 System.Web.UI.WebControls；

命名空间 MyNameSpace { 公共类 MaxWidthImage ：图像 { 私有 int _MaxWidth;

public int MaxWidth
{
    get
    {
        return _MaxWidth;
    }
    set
    {
        _MaxWidth = value;
    }
}

protected override void OnPreRender(EventArgs e)
{
    if (string.IsNullOrEmpty(ImageUrl)) return;

    using (System.Drawing.Image MyImage =
        System.Drawing.Image.FromFile
        (HttpContext.Current.Server.MapPath(ImageUrl)))
    {
        int CurrentWidth = MyImage.Width;

        if (MaxWidth != 0 && CurrentWidth > MaxWidth)
        {
            CurrentWidth = MaxWidth;
        }
        Attributes.Add("width", CurrentWidth.ToString());
    }
}

} }

（来自http://evonet.com.au/extending-the-aspimage-control-to-set-a-maximum-width/）

【讨论】：

【解决方案6】：

我一直在寻找不同的东西，但得到了一条线索，我将遵循它并可能帮助其他人。

我的想法是根据用户屏幕宽度调整图像服务器端的大小以节省下载时间。我忘记了 JS window.screen。例如，我可以在将图像获取为 image.php?id=1&ws=1280 之前建立它，然后在服务器端将其缩小到所需的大小。在服务器上做一点工作，但在用户设备上要快得多，如果他们在较小的屏幕上的话。

不确定它在智能手机上的工作方式（规模=1），但它可能会在某个地方发挥作用。

只是一些可能对其他人有所帮助的想法。

【讨论】：

请在您的回答中提供更多详细信息。正如目前所写的那样，很难理解您的解决方案。