CSS3 Transform Scale and Container with Overflow

Question

I am trying to create a zoom-in functionality for a container with CSS3 Transform (scale) and all seems to work nicely, but when the image is scaled, the overflow only covers a part of the image, leaving the top left part out of the overflow.

Code is as follows:

HTML:

<div class="outer">
    <img id="profile" src="http://flickholdr.com/300/200/" />
</div>
<button class="zoom orig">Original</button>
<button class="zoom x2">x2</button>
<button class="zoom x4">x4</button>

CSS:

.outer          { width: 500px; height: 500px; overflow: auto; text-align: center; background: #eee; }
.outer:before   { content: ''; display: inline-block; vertical-align: middle; height: 100%; }
.outer img      { vertical-align: middle; }

.scale_x2   { -webkit-transform: scale(2); -moz-transform: scale(2); -ms-transform: scale(2); -o-transform: scale(2); transform: scale(2); }
.scale_x4   { -webkit-transform: scale(4); -moz-transform: scale(4); -ms-transform: scale(4); -o-transform: scale(4); transform: scale(4); }

JS:

$(function() {
    $('.zoom').on("click", function() {
        if ($(this).hasClass('orig')) {
            $("#profile").removeClass();
        } else if ($(this).hasClass('x2')) {
            $("#profile").removeClass().addClass('scale_x2');
        } else if ($(this).hasClass('x4')) {
            $("#profile").removeClass().addClass('scale_x4');
        }
    });
});

Check the fiddle here: http://jsfiddle.net/sbaydakov/RhmxV/2/

Any thoughts on how to make this work, so that the whole image is viewable?

Thanks.

I actually want to be able to scroll around that container so that I am able to see all corners of the image if I wanted to. — sbay, Jul 20 '13 at 03:20
they are getting applied but the top left portion of the image is being cutoff by the overflow — sbay, Jul 20 '13 at 11:29
Tried playing around with negative margins and translate properties, but none do exactly what I want. The result is still not zooming into the center. Was also thinking of perhaps throwing in jQuery to set the offset in the container, but to no avail. Check the latest Fiddle here: http://jsfiddle.net/sbaydakov/RhmxV/5/ — sbay, Jul 22 '13 at 22:05
Can you please explain what you want to do in more detail. Your original jsFiddle zoomed into the center of the image. But it sounds like you're looking for something different. — Brett DeWoody, Feb 23 '14 at 16:33
@BrettDeWoody pay close attention to the entire image area when zooming - the top and left portions are being cut off. — sbay, Mar 05 '14 at 21:42

score 3 · Answer 1 · answered Feb 25 '14 at 13:55

The image is scaled from center radially outwards, thus causing the top-left image pixels to disappear. Check this working fiddle http://jsfiddle.net/RhmxV/37/

.scale_x2 {
    margin-left: 150px;
    margin-top: -193px;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
}
.scale_x4 {
    margin-left: 450px;
    margin-top: 15px;
    -webkit-transform: scale(4);
    -moz-transform: scale(4);
    -ms-transform: scale(4);
    -o-transform: scale(4);
    transform: scale(4);
}

score 1 · Answer 2 · answered Sep 11 '14 at 14:12

1

If you want to keep the top left corner where it is, use transform-origin:

transform: scale(2);
transform-origin: top left;

answered Sep 11 '14 at 14:12

Cees Timmerman

17,623
11
91
124

CSS3 Transform Scale and Container with Overflow

2 Answers2

Linked