locked
Dynamic image resolution RRS feed

  • Question

  • Hey,

     

    I am developing a metro styled Windows 8 HTML/JS application. The app is basically a touch-orientated photography portfolio.

    I want to integrate a vast grid of large images next to each other, the user stumbles insides this grid via touch gestures (like scrolling). Those images are saved in maximum resolution and are displayed in a size about 95% of the screen. Like 

    max-height: 95%; max-width: 95%;
    
    .

     

     

    So the point is, if the user zooms in a image via pinch-to-zoom the image resolution shall be dynamically adjusted to still fit the maximum screen resolution. (The user should see more details; more pixels) Any idea how to do this?

     

    Or if nothing else helps, how to disable pinch-to-zoom?

    Regards, Klaus Widraw





    Tuesday, January 10, 2012 8:07 AM

Answers

All replies

  • Hi Klaus,

    So you simply want to disable zoom or do you only want to zoom to a certain extent?  If the pictures are already displayed at the highest resolutions available, where would the higher resolution come from when they zoom?  I am having trouble understanding what you are trying to accomplish: "the image resolution shall be dynamically adjusted to still fit the maximum screen resolution".  How would the resolution be dynamically adjusted?  Are you saying you want to ensure a pixel to pixel match from picture to screen?  Do you know the pixel density of the images and are they all the same in your case?

    -Jeff


    Jeff Sanders (MSFT)
    Tuesday, January 10, 2012 9:06 PM
    Moderator
  • Hey Jeff,

     

    The images are stored in a resolution about 4000px x 3000px. The images are displayed using percentage via css. (max-height: 95%; max-width: 95%;). So for example on a Full HD screen they will get displayed about 1820px x 1365px.

    Let's stick to the example of the Full HD Screen: If the users zooms into the page, the images stay in a resolution about 1820px x 1365px, the app automatically enlarges the image by algorithm, though they are physically stored in a size about 4000px x 3000px. This means, theoretically  instead of enlarging the "1820px x 1365px" images, a better resolution could be loaded from the source files.

     

    Hope you understand what I mean.

     

    If this idea would not be practicable, I'd like to instead disable zooming.

     

    Regards, Klaus Widraw


    http://www.klaus-widraw.de/
    Wednesday, January 11, 2012 3:53 PM
  • I understand now.  Thanks Klaus.  My first thought is to use semantic zoom but give me some time to see if there may be a better solution.
    Jeff Sanders (MSFT)
    Wednesday, January 11, 2012 3:55 PM
    Moderator
  • Thank you
    http://www.klaus-widraw.de/
    Wednesday, January 11, 2012 3:59 PM
  • Maybe you can try to redraw the visible image region after the zoom to show more pixels for details. 
    Sean
    Wednesday, January 18, 2012 8:46 AM
  • Hi Klaus,

    I think I found a solution for you.  You can limit the amount of zoom on the element:

    http://msdn.microsoft.com/en-us/library/windows/apps/hh465375.aspx

    -Jeff


    Jeff Sanders (MSFT)
    Monday, January 23, 2012 6:44 PM
    Moderator