CODEWITHSUNDEEP
javascripthtmlcss
allenhwkim
allenhwkim

Reputation: 27748

Scaled DIV section does not fit to its container

I have the following script to copy show html body contents in a small single div.

window.onload = function() {
  //A container to hold screenshot div
  var container = document.createElement('div');
  container.id ="container";
  container.style.width = "60%";
  container.style.height = "200px";
  container.style.border = "2px dotted red";

  //screenshot div
  var div = document.createElement('div');
  div.style.width = getStyle(document.body, 'width');
  container.appendChild(div);
  document.body.appendChild(container);

  //copy body contents to screenshot div
  var clonedBody = document.body.cloneNode(true);
  while (clonedBody.childNodes.length > 0) {
    div.appendChild(clonedBody.childNodes[0]);
  }
  for (var i=0; i<clonedBody.style.length; i++) {
    var propName = clonedBody.style[i];
    div.style[propName] = clonedBody.style[propName];
  };

  //scale screenshot div
  var orgWidth = parseFloat(getStyle(document.body, 'width'));
  var newWidth = parseFloat(getStyle(container, 'width'));
  var ratio = newWidth/orgWidth;
  div.style.transform = "scale("+ratio+")";
}

What troubling me is that the scaled section does not fit to its container as you seen on the following image.

As you see on the image, I want the scaled div to fit into the red-dotted box.

Imgur

I think I am missing some simple css and needs help.

Here is the plunker, http://plnkr.co/edit/aFqo14?p=preview

Upvotes: 1

Views: 77

Answers (3)

Well Wisher
Well Wisher

Reputation: 1875

hell, i have used background size for that image and it worked well,

i used the following js at the end 

 // div.style.transform = "scale("+ratio+")";
 div.style["background-size"] = "345px";
 div.style["height"] = "200px";

if you dont want to use background-size property then use image with 345px width ang 200px height or proportional to that and use image width css as 100%.

Let me know if that helps.. thanks

Upvotes: 1

Thatkookooguy
Thatkookooguy

Reputation: 7012

You're only missing one css line to make this exactly like you want it. transform usually have a reference point in the original element that it works against. For example, the transform-origin of the rotate() function is the centre of rotation.

To change the default behaviour, you can add this to your css:

transform-origin: top left;

this will make your item reference the top left corner of the original.

you can do that in javascript by adding: div.style.transformOrigin = "top left"

here's your code fixed:

<!DOCTYPE html>
<html>
<head>
  <script>
  // ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
  function getStyle(elem, prop) {
    var styles = window.getComputedStyle(elem, null);
    var value = styles.getPropertyValue(prop);
    if (!value) {
      throw "Could not get style for " + prop;
    }
    return value
  }
  
    window.onload = function() {
      //A container to hold screenshot div
      var container = document.createElement('div');
      container.id ="container";
      container.style.width = "60%";
      container.style.height = "200px";
      container.style.border = "2px dotted red";
      container.style.overflow = "hidden";
      
      //screenshot div
      var div = document.createElement('div');
      div.style.width = getStyle(document.body, 'width');
      container.appendChild(div);
      document.body.appendChild(container);
  
      //copy body contents to screenshot div
      var clonedBody = document.body.cloneNode(true);
      while (clonedBody.childNodes.length > 0) {
        div.appendChild(clonedBody.childNodes[0]);
      }
      for (var i=0; i<clonedBody.style.length; i++) {
        var propName = clonedBody.style[i];
        div.style[propName] = clonedBody.style[propName];
      };
      
      //scale screenshot div
      var orgWidth = parseFloat(getStyle(document.body, 'width'));
      var newWidth = parseFloat(getStyle(container, 'width'));
      var ratio = newWidth/orgWidth;
      div.style.transform = "scale("+ratio+")";
      div.style.transformOrigin = "top left"; /* ADDED! */
    }
  </script>
</head>

<body style="background: url(http://placekitten.com/640/480) no-repeat">
  <img src="http://placekitten.com/100/100" />
  <p style="color:#fff">Lorem ipsum dolor sit amet,  consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</body>
</html>

More info about tranform-origin:https://developer.mozilla.org/en/docs/Web/CSS/transform-origin

Upvotes: 1

allenhwkim
allenhwkim

Reputation: 27748

Found the answer by googling "scaled div positioning"

Here is the plunker http://plnkr.co/edit/k27ph6?p=preview

What I missed was div.style.transformOrigin = "0 0";

//screenshot div
var div = document.createElement('div');
div.style.width = getStyle(document.body, 'width');
div.style.transformOrigin = "0 0";  // <--- this line
container.appendChild(div);
document.body.appendChild(container);

enter image description here

Upvotes: 1

Related Questions