CODEWITHSUNDEEP
javascripthtmlcss
Bhoomi
Bhoomi

Reputation: 89

Content(image) goes out of parent div

I have tried to do zoom effect using html, css and Javascript but the image goes out of the parent div after zooming the content.

After clicking zoomin button the image will go out of the div and the first image will cut from the beginning.

var factor = 1;

function funZoomOut() {
  if (factor > 0.5) {
      factor = factor - 0.1;
      var p = document.getElementById("divArea");
      p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}
function funZoomIn() {
  if (factor < 1.3) {
      factor = factor + 0.1;
      var p = document.getElementById("divArea");
      p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}
.demoCss {
  overflow: auto;
  height: 470px;
  text-align: center;
  border: 5px solid red;
  padding-top: 10px;
  position: relative;
}

.test {
  height: 100%;
}
<body>
<div>
  <div>
    <button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
    <button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
  </div>
  <div class="demoCss">
    <div id="divArea" class="test">
      <div>
          <img src="Images/2.jpg" alt="image" height="150px" width="150px" id="img1" />
      </div>
      <div>
          <img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
      </div>
      <div>
          <img src="Images/article-1.jpg" alt="image" height="150px" width="150px" />
      </div>
    </div>
  </div>
</div>

Upvotes: 3

Views: 1148

Answers (3)

Lekhraj
Lekhraj

Reputation: 521

    .demoCss {
  overflow: auto;
  height: 470px;
  text-align: center;
  border: 5px solid red;
  padding-top: 10px;
  position: relative;
}

.test {
  height: 100%;
  transform-origin: 50% 0%;
  transitions: all 0.5s ease 0s;
}

Upvotes: 0

yuriy636
yuriy636

Reputation: 11661

It goes out of the containing div because the transform-origin (what transform(scale()) takes as the starting point for the transformation) is set at the center of the images by default.

If you change it to be in the top-middle, the images will be scaled from top to bottom:

.test {
  transform-origin: 50% 0%;
}


var factor = 1;

function funZoomOut() {
  if (factor > 0.5) {
    factor = factor - 0.1;
    var p = document.getElementById("divArea");
    p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}

function funZoomIn() {
  if (factor < 1.3) {
    factor = factor + 0.1;
    var p = document.getElementById("divArea");
    p.setAttribute("style", "transform: scale(" + factor + ");");
  }
}
.demoCss {
  overflow: auto;
  height: 470px;
  text-align: center;
  border: 5px solid red;
  padding-top: 10px;
  position: relative;
}

.test {
  height: 100%;
  transform-origin: 50% 0%;
}
<div>
  <div>
    <button id="btn1" value="submit" onclick="funZoomOut();" style="position:relative; z-index:1;">ZoomOut</button>
    <button id="btn1" value="submit" onclick="funZoomIn();" style="position:relative;z-index:1;">ZoomIn</button>
  </div>
  <div class="demoCss">
    <div id="divArea" class="test">
      <div>
        <img src="https://lorempixel.com/300/300/?1" alt="image" height="150px" width="150px" id="img1" />
      </div>

      <div>
        <img src="https://lorempixel.com/300/300/?2" alt="image" height="150px" width="150px" />
      </div>
      <div>
        <img src="https://lorempixel.com/300/300/?3" alt="image" height="150px" width="150px" />
      </div>
    </div>
  </div>

Upvotes: 5

nirbhau
nirbhau

Reputation: 42

Your div area/container should have overflow hidden i.e.

.demoCss {
  overflow: hidden;
}

Upvotes: -2

Related Questions