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

Question

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

放大和缩小效果很好，也可以旋转。但是当我旋转图像并缩放图像时，图像会从顶部切割下来。

我已经尝试为图像添加绝对位置并将其赋予顶部：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

我只改变了这个区域。使用固定尺寸进行旋转和缩放事件