title: transformed image inside div
body: <p>I trying put tranformed image inside div with specific dimension with using "img src" approach. As a result, there has to be inside red bordered div only transformed cut of image. But as You see image overlapping outside... What I misssing? Thanks</p>
  
  <p>css></p>
  
  <pre><code>img {
      max-width: 100%;
      max-height: 100%;
      transform: scale(2.5);
      transform-origin: 0 0;
  }
  
  .portrait {
      height: 125px;
      width: 200px;
      border: 2px red solid;
  }
  </code></pre>
  
  <p>html></p>
  
  <pre><code>&lt;div class="portrait"&gt;
      &lt;img src="http://i.stack.imgur.com/xkF9Q.jpg"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/o5nbnmbe/" rel="nofollow noreferrer">fiddle</a></p>