2

I'm trying to scale image double when click zoom-in button,
and half image when click zoom-out button

My issue is, when click zoom-in button (so, image size is double)
and if it's size over than container, the left side of image (or top side of image) cut off.

what should i do?

same question here, CSS Transform scale scrolling issue ... but it's not a good idea.
because it also scale focus on 'top-left side' when zoom-out image, so center alignment is impossible
(i want to apply transform: scale(..) using transform-origin: center)

the only way that i know is every time calculate image size, and apply margin for cut-off, but it is hard to apply

any idea please?

code look like this.

constructor() {
  super()
  this._refs = {
    ratio: 100
  }
}


getImageStyle() {
    return {
      transform: scale(calc($ {
            this.state.ratio
          }
          / 100)),
          'transform-origin': 'center'
        }
      }

      zoomIn() {
        this.setState({
          ratio: this.state.ratio + 25
        })
      }

      zoomIn() {
        this.setState({
          ratio: this.state.ratio - 25
        })
      }

      render() {
        const {
          src
        } = this.props
        return ( <
          div className = {
            styles.wrapper
          } <
          img style = {
            this.getImageStyle()
          }
          ref = {
            (elem) => setRefToNode(this._refs, 'image', elem)
          }
          className = {
            styles.image
          }
          src = {
            src
          }
          /> <
          /div>
        )
      }
.wrapper {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  overflow: scroll;
  .image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    background-color: white;
  }
}
Stephan Bauer
  • 9,120
  • 5
  • 36
  • 58
highalps
  • 131
  • 1
  • 3
  • 16
  • 1
    Questions seeking code help must include the shortest code necessary to reproduce it **in the question itself** preferably in a [**Stack Snippet**](https://blog.stackoverflow.com/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/). See [**How to create a Minimal, Complete, and Verifiable example**](http://stackoverflow.com/help/mcve) – Paulie_D Jun 23 '17 at 08:24

2 Answers2

0

Don't understand what the problem is.
Image doesn't cut off when transforming.

$("#zoom-in").on("click", function() {
  $(".image").removeClass("zoom-out");
  $(".image").addClass("zoom-in");
});

$("#zoom-out").on("click", function() {
  $(".image").removeClass("zoom-in");
  $(".image").addClass("zoom-out");
});

$("#zoom-off").on("click", function() {
  $(".image").removeClass("zoom-in");
  $(".image").removeClass("zoom-out");
});
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border: 4px solid;
}
.wrapper .image {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.4);
  border-radius: 50%;
  transform-origin: center;
  transition: transform ease .3s;
}
.wrapper .image.zoom-in {
  transform: scale(2);
}
.wrapper .image.zoom-out {
  transform: scale(0.5);
}

section {
  position: fixed;
  bottom: 0;
  left: 0;
  margin: 10px;
}
section button {
  width: 30px;
  height: 30px;
  margin: 10px;
  font-weight: bold;
  font-size: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="image"></div>
</div>

<section>  
  <button id="zoom-out">−</button>
  <button id="zoom-off">0</button>
  <button id="zoom-in">+</button>
</section>
3rdthemagical
  • 5,271
  • 18
  • 36
0

A simple solution is to use transition-into: top left as the transform then seems to shift the image over, preventing the cutoff. That does mean that by default you are zooming into the top left corner.

OneTwoThree123
  • 3
  • 3