html - 在 div 中转换图像

Question

我尝试使用“img src”方法将转换后的图像放入具有特定尺寸的 div 中。因此，内部必须只有红色边框的 div 转换后的图像剪辑。但是当你看到图像在外面重叠时......我错过了什么？谢谢

CSS>

img {
    max-width: 100%;
    max-height: 100%;
    transform: scale(2.5);
    transform-origin: 0 0;
}

.portrait {
    height: 125px;
    width: 200px;
    border: 2px red solid;
}

html>

<div class="portrait">
    <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>

fiddle

Answer 1

你只是在 div 元素中缺少 overflow: hidden;

img {
  max-width: 100%;
  max-height: 100%;
  transform: scale(2.5);
  transform-origin: 0 0;
}

.portrait {
  overflow: hidden;
  height: 125px;
  width: 200px;
  border: 2px red solid;
}

<div class="portrait">
  <img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>