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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.