flex div上的自动溢出会从顶部剪切图像

Question

我已经实现了图像查看器，可以在其中旋转图像并且可以进行放大和缩小。

放大和缩小效果很好，也可以旋转。 但是，当我旋转图像并对其进行缩放时，图像会从顶部被剪切掉。

我尝试为图像添加一个绝对位置并给它top：0，但是都没有用。

有人可以帮忙吗？

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow-x: auto;
}
.modal-container .modal-window {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    // Optional support to confirm scroll behavior makes sense in IE10
    //-ms-flex-direction: column;
    //-ms-flex-align: center;
    //-ms-flex-pack: center;
    height: 100%;
    position: relative;
}
.modal-container .modal-window .modal-content {
  transform: rotate(90deg) scale(2);
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    padding: 10px;
	margin: auto;
  position:absolute;
  top:0;
  flex:none;
  align-self:flex-start;
}

<div class="modal-container">
    <div class="modal-window">
        <img class="modal-content" src="http://www.hislider.com/templates/erishorizontal/dataimages/7.jpg">
        </div>
    </div>
</div>

http://jsfiddle.net/abx8c13j/16/

Answer 1

.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    overflow-x: auto;
}
.modal-container .modal-window {
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-content: flex-start;
    justify-content: flex-start;
    // Optional support to confirm scroll behavior makes sense in IE10
    //-ms-flex-direction: column;
    //-ms-flex-align: center;
    //-ms-flex-pack: center;
    height: 100%;
    position: relative;
}
.modal-container .modal-window .modal-content {
  transform: rotate(90deg) scale(2);
  transform-origin: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    width: 100%;
    height: 100%;
    max-width: 25px;
    max-height: 25px;
    padding: 10px;
	margin: auto;
  flex:none;
  align-self:flex-start;
}

<div class="modal-container">
    <div class="modal-window">
        <img class="modal-content" src="http://www.hislider.com/templates/erishorizontal/dataimages/7.jpg">
        </div>
    </div>
</div>

.modal-container .modal-window.modal-content

我仅更改了该区域。为旋转和缩放事件使用固定尺寸