PDA

View Full Version : Resolved Multizoom - Image sizing in responsive design



ozinder
02-13-2014, 01:01 PM
1) Script Title: Multizoom v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

3) Describe problem:
For responsive design reasons I have the div and image sizes as percentage values in css. I tried to set up multizoom according to Demo 3, but the script resizes the large image to the height in the image file.

e.g.:

The <div id="targetarea"> inherits the dynamic css size from its parent, lets say 700px.
The zoomable <img> has 900x600px.
In css, the <img> is set to not exceed its parent with {width: auto !important; max-width: 100%;width:100%}, so the image normally resizes well to 700x466

Multizoom styles the <img style="width: 900px; height: 600px"> and the <div class="zoomtracker" style="height: 600px; width: 700px"> , so the image looses its aspect ratio and displays in 700x600.

How do I prevent the script from overwriting the CSS?

Thanks for any help you can give!

ozinder
02-14-2014, 01:14 PM
So, no response until now.
I found kthornbloom.com/smoothproducts/ doing it well enough for my purpose.