Изменение размерав зависимости от разрешения экрана пользователя

Question

Я хотел бы показать изображение на экране, и его размер (высота и ширина) должен быть отрегулирован так, чтобы соответствовать размеру экрана (растянуть или сжать).Изображение было сохранено на сервере и имеет размер 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 на 1024 как полезную область.

Есть ли способ получитьэкран восстанавливает и переносит эти параметры в мой метод кода позади (GetResized - это метод, который возвращает мне новую высоту и ширину)?

Я понимаю, что у пользователя может не быть развернутым браузер - это нормально.

Answer 1

Вы можете определить размер изображения в процентах, что освобождает вас от этого материала.

Answer 2

Получите разрешение экрана монитора с помощью Javascript, а затем измените размер изображения в javascript или передайте разрешение экрана своему коду и измените размер изображения с помощью C #.

Answer 3

Рассматривали ли вы создание пользовательского серверного элемента управления, который изменяет размер изображения в зависимости от разрешения экрана?В следующем примере добавляется свойство MaxWidth в элемент управления Image, но вы можете изменить его, чтобы установить максимальную ширину / высоту, пропорциональную разрешению экрана:

using System;

using System.Web;использование System.Web.UI.WebControls;

пространство имен MyNameSpace {открытый класс MaxWidthImage: Image {private 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/)

Answer 4

Как уже упоминалось, лучше иметь дело с такими сценариями на стороне клиента, а не на стороне сервера.Я рекомендую использовать стилизацию CSS или JavaScript.

Дополнительная информация:

• http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
• Автоматическое изменение размера изображения в зависимости от размеров окна браузера

Answer 5

Если вам нужна информация о разрешении экрана, которое вы можете использовать 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.