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

【问题标题】：Overflow auto on flex div cuts the image from topflex div上的溢出自动从顶部剪切图像
【发布时间】：2018-09-06 15:30:58
【问题描述】：

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

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

我尝试为图像添加一个绝对位置并将其设置为 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/

【问题讨论】：

标签： css flexbox css-position css-transforms

【解决方案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

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

【讨论】：

我必须缩放图像，所以我不能给它一个像素的宽度或高度。
如果您的图像尺寸大于父 div 的尺寸，这将不起作用
我不明白。请用一个例子告诉我你想要什么。
我的要求是旋转图像并缩放它。当最终用户缩放图像时，它必须是其高度和宽度的两倍。所以我不能给出一个固定的尺寸。另外，如果您要在解决方案中增加 max-width 和 max-height，它也不会起作用。例如：jsfiddle.net/abx8c13j/89