How to enable zoom in images set to 100% width in CSS?

Question

How to enable zoom in images even though they are set to 100% width in CSS?

This question might sound contradictionary -- if you set something to 100% width

img {
    width: 100%;
    height: auto;
    padding: 0;
    border: 0;
    margin-bottom: 0.66em;

you want it like that, don't you?

Well ... Figure this: There's a gallery of images which you want to be 100% wide. The user zooms, and this will only zoom the text. The images will continue to be 100% at whatever zoom level.

What I would like is this behaviour:

The images are 100% wide at neutral zoom level, but when the user zooms the page, the images are zoomed as well, though: The images are resized to always be 100% of the window, even when user resizes browser (if in normal zoom).

Is there a CSS only solution to this?

A possible solution using javascript would be setting the image width to the px of browser window in javascript instead. Zoom will work for the images as expected. When the user resizes browser javascript has to change the width of the images again.

Answer 1

The zoom behavior is browser dependent and even configurable, depending on the browser your visitors use, the behavior is either what you describe or what you want already!

The only way control the behavior is to implement zooming yourself. Javascript is one way but keep in mind that the browser zoom is never under your control. It is there for accessibility reasons. Your own zoom would allow users to zoom in another way on whichever elements you decide make your script work with.

Answer 2

Sadly this can't be done without JavaScript, due to the feature that you require is a zoom on the PX that they are hovering over... So yes you could get it too zoom in but the image would not change when they move the cursor across the image as you would expect. You should opt to use jQuery or any other JavaScript library such as Mootools.

Doing a simple search on Google for something like jQuery Zoom - you will be overwhelmed with the amount of plugins premade to make this task easy for you.

Here is two that I found that meet your requirements:

• Jacklmoore jQuery Zoom
• jQZoom - Example 4
• Jquery Image Zoom Plugin - Inner Zoom Example