Resize based on users screen resolution

Question

I would like to show an image on a screen, and it's size (Height and Width) must be adjusted to fit on the screen (Stretch or shrink). The image has been saved to the server, and is 1024 x 768 (example).

So, at the moment, I do this:

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;

So, at the moment, I am forcing my image to fit in a square sized 800 x 800 (I take into account Portrait vs Landscape, and use ratio to maintain aspect.

Problem is, on a low res screen, that, the user has to scroll a bit to get to the bottom the image (where I have a Close button). And on a very high res scree, I could have maintained 1024 by 1024 as usable area.

Is there a way to get the screen res, and take those parameters into my code behind method (GetResized is a method that returns me a new Height and Width)?

I understand the user may not have his browser maximused - that's OK.

you should fiddle with css insted of doing that on server with C# — Shekhar_Pro, Dec 30 '11 at 08:50

score 3 · Accepted Answer · answered Dec 30 '11 at 08:50

3

You can define the Image size in percentage which frees you from this stuff.

answered Dec 30 '11 at 08:50

Jahan Zinedine

14,616
5
46
70

This would have been the best idea - but the control I am using to display the image (http://leandrovieira.com/projects/jquery/lightbox/) takes the URL of the image I want to display, but doesn't give me the option to resize it, or put a percentage on it - that I can find. – Craig Dec 30 '11 at 09:11

score 1 · Answer 2 · answered Dec 30 '11 at 08:44

1

Get Monitor Screen Resolution with Javascript, and then change images size in javascript, or pass Screen Resolution to your code behind and change image size with C# .

answered Dec 30 '11 at 08:44

Masoomian

740
1
10
25

score 0 · Answer 3 · answered Aug 30 '21 at 17:31

I was looking for something different, but got a clue which I will follow and may help others.

My idea was resizing the image server-side based on the users screen width to save downloading time. I was forgetting JS window.screen. I can have that established before getting the image as image.php?id=1&ws=1280, for instance, and reduce it server-side for the size needed. It's a little bit of work in the server, but much faster on the user's device, if they are on a smaller screen.

Not sure how it will work on a smartphone (scale=1), but it may lead somewhere.

Just a few thoughts that may help others.

Please provide additional details in your answer. As it's currently written, it's hard to understand your solution. — Community, Aug 30 '21 at 20:21

score 0 · Answer 4 · edited Dec 30 '11 at 09:04

IF you need info about screen resolution the you could use window.screen it has following properties:

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.

That's Javascript properties? How do I get them to my code behind? — Craig, Dec 30 '11 at 09:12

score 0 · Answer 5 · edited May 23 '17 at 12:01

0

As other mentioned it's better to deal with such scenarios on Client-side instead of Server-side. I recommend using CSS styling or JavaScript.

More information:

edited May 23 '17 at 12:01

Community

1
1

answered Dec 30 '11 at 09:14

Qorbani

5,825
2
39
47

score 0 · Answer 6 · answered Jan 26 '12 at 03:44

Have you considered creating a custom server control that resizes the image based on the screen resolution? The following example adds a MaxWidth property to the Image control, but you can modify it to set max Width/Height to be proportional to the screen resolution:

using System;

using System.Web; using System.Web.UI.WebControls;

namespace MyNameSpace { public class 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());
    }
}

} }

(from http://evonet.com.au/extending-the-aspimage-control-to-set-a-maximum-width/)

Resize based on users screen resolution

6 Answers6