CODEWITHSUNDEEP
javascript
user11405506
user11405506

Reputation:

How to zoom on the center of an image?

I want to know how to zoom on the center of an image.

I tried different things like imageWrapper.width().left

$(document).on('click', '.process-diagram-zoom-in', function(){
    var div = $(this).parents('.container-fluid:first');
    var imageWrapper = div.find('.image-wrapper');
    imageWrapper.width(imageWrapper.width() * 5.1);
});

Upvotes: 0

Views: 51

Answers (1)

Ealhad
Ealhad

Reputation: 2220

Apparently, you already know how to magnify the image, so what you need to do is make sure it's centered inside a container.

This can be done with simple CSS.

For the container:

position: relative;

And for the image:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Upvotes: 1

Related Questions