javascript - how to zoom in an image without increasing its size? - Stack Overflow

admin管理员组

文章数量:1355658

I want to get a zoom effect on the image but without increasing its size on the screen, I was able to use "transform: scale ()" for the image to get a sort of zoom, but I do not want the space it occupies increases, which is what happens when I increase the scale ().

How can I get this? The current effect I've achieved is on my testing site and in the future will be a blog / portfolio: /

The effect happens with hover in the image.

PS: the code looks like this:

&__media {
    transition: transform .25s ease-in-out;

    &:hover {
        transform: scale(1.025);
    }
}

I want to get a zoom effect on the image but without increasing its size on the screen, I was able to use "transform: scale ()" for the image to get a sort of zoom, but I do not want the space it occupies increases, which is what happens when I increase the scale ().

How can I get this? The current effect I've achieved is on my testing site and in the future will be a blog / portfolio: http://marcosroot.pythonanywhere./blog/

The effect happens with hover in the image.

PS: the code looks like this:

&__media {
    transition: transform .25s ease-in-out;

    &:hover {
        transform: scale(1.025);
    }
}

• javascript
• css

Share Improve this question Follow edited Feb 13, 2019 at 0:51 marcos souza asked Feb 13, 2019 at 0:42 marcos souzamarcos souza 76111 gold badge1010 silver badges2020 bronze badges 6

• how about some canvas magic? For example: codepen.io/techslides/pen/zowLd – Miroslav Glamuzina Commented Feb 13, 2019 at 0:46
• @Miroslav this seems very plicated for my purpose, I want despite a zoom effect on a hover, but without increasing the space that the image occupies on the screen – marcos souza Commented Feb 13, 2019 at 0:52
• 1 hmm... maybe you could wrap it in a container that has overflow set to hidden? – Jhecht Commented Feb 13, 2019 at 0:55
• @Jhecht it's the answer, you should add it I guess – Temani Afif Commented Feb 13, 2019 at 1:05
• @Jhecht exactly this, thx – marcos souza Commented Feb 13, 2019 at 1:16

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 10

This approach has no dependencies and works in all modern browsers. JavaScript updates CSS variables through setProperty and the background-positionof the zoomed image dynamically updates as you move your mouse.

const zoomify = (width, height) => {
  const el = document.querySelector('.zoomify');
  el.style.width = `${width}px`;
  el.style.height = `${height}px`;
  el.addEventListener('mousemove', handleMouseMove, false);
}

function handleMouseMove(e) {
  const dimensions = this.getBoundingClientRect();
  const [x, y] = [
    e.clientX - dimensions.left,
    e.clientY - dimensions.top
  ];
  const [percentX, percentY] = [
    Math.round(100 / (dimensions.width / x)),
    Math.round(100 / (dimensions.height / y))
  ];
  this.style.setProperty('--mouse-x', percentX);
  this.style.setProperty('--mouse-y', percentY);
}

zoomify(320, 212);

* {
  box-sizing: border-box;
}

html,
body {
  padding: 10px;
}

.starting-image {
  width: 100%;
  height: 100%;
}

.zoomify {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.zoomify::after {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-image: url("https://images.unsplash./photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w,%20https://images.unsplash./photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: background-position;
}

.zoomify:hover .starting-image {
  opacity: 0;
  position: absolute;
}

.zoomify:hover::after {
  opacity: 1;
  background-size: 250%;
  cursor: zoom-in;
  background-position: calc(var(--mouse-x) * 1%) calc(var(--mouse-y) * 1%);
}

<div class="zoomify">
  <img class="starting-image" src="https://images.unsplash./photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w,%20https://images.unsplash./photo-1528763216729-fb67cba479db?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=728e3916b52b079634aa7c7f82af612d&auto=format&fit=crop&w=6774&q=80%206774w" alt="diner">
</div>

本文标签： javascripthow to zoom in an image without increasing its sizeStack Overflow