Zooming / Scaling large pictures with css?

I wrote a simple perl based picture gallery for my website and I'd like to be able to scale down (zoom) large images that don't fit in the browser's window.

If I point internet explorer to an image url (a .jpg for example), it auto-sizes the image to the browser's window and then when you hover over it, it display a magnifying glass allowing you to toggle between actual size and the scaled down size.

My picture gallery shows items via html pages generated by my perl script and uses the
<img src="path to jpg">

Open in new window

tag (with no parameters) to display the image. The image is always displayed at full size so giant images are difficult to see and the magnifying glass described above is not available.

Is there a way, using CSS, to provide a zoom capability for a large image?
ou81aswellAsked:
Who is Participating?
 
Dave BaldwinFixer of ProblemsCommented:
No there isn't.  What I usually do in situations like that is to set one of the dimensions, usually the width to a fixed value and then let the browser scale the height to match.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your perl script does not come into play here except perhaps for generating the html.  You will want to do this with javascript and instead of reinventing the wheel, there are plenty of jquery plug ins for this.  

http://www.elevateweb.co.uk/image-zoom/examples
http://mark-rolich.github.io/Magnifier.js/
https://www.magictoolbox.com/magiczoom/

There is a css zoom, but it doe not look to be well supported at this time https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom and using jquery/javascript will give you what you need. If css was working for this, it would probably be difficult to get the smooth hover effect these other plug ins achieve.
0
 
ou81aswellAuthor Commented:
I did not know that the browser will scale the height if I only set the width. Interesting.

Not wanting to go down the javascript road I ended up adjusting my photo gallery to simply link directly to the images so the browser would take care of sizing.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.