My current CSS ensures that images are not larger than their parent element, maintaining responsiveness and a clean look.
However, I recently added an image zoom feature which is displaying the entire image inside the zoom area instead of just enlarging a portion of it.
I know that if I remove the max-width: 100% property from the image tag, the zoom works properly. However, this change affects other parts of the site as well.
Here's my CSS:
img {
/* Responsive images (ensuring images don't exceed parent width) */
max-width: 100%;
/* Part 1: Set maximum width relative to parent */
width: auto\9;
/* IE7-8 compatibility for responsive images */
height: auto;
/* Part 2: Scale height based on width to prevent stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
I simply want to bypass this CSS rule when called from a specific image or JavaScript function.