Javascript-当图像旋转时，它不会'；t保持它的比例/大小

我刚刚开始学习javascript、HTML5和CSS。我正在开发一个PWA（渐进式web应用程序），可以拍照、裁剪、旋转和下载

所以旋转是有效的。然而，当我的图像旋转时，它不会保持他的比例/大小

这里是我的电脑上的一个示例，当图像未旋转且反向旋转时（工作正常）（其原始大小为1920x1080）：

当它垂直旋转时，它不会保持它的比例/大小。高度太高（我目前的问题）：

这就像图像正在重新调整其原始大小。。。我必须向下滚动才能看到图片的其余部分。如果图像的高度太长，可能会让人恼火

当图像垂直旋转时，有人知道如何保持相同的比例/大小吗

我正在使用库旋转我的图像

var format=“图像/jpeg”
var jpegQuality=0.4
/**
*点击按钮时向左旋转图片
*/
函数rotateLeftButtonTapped（）{
document.getElementById（'btn-rotate-left-photo'）。onclick=function（）{
loadImage（document.getElementById（'pictureFromCamera'）.src，函数（img）{
var imgUrl=img.toDataURL（格式，JPEG质量）
document.getElementById（'pictureFromCamera'）.setAttribute（“src”，imgUrl）
}, {
方向：8
}//选项
)
}
}
/**
*点击按钮时，向右旋转图片
*/
函数rotateRightButtonTapped（）{
document.getElementById（'btn-rotate-right-photo'）。onclick=function（）{
loadImage（document.getElementById（'pictureFromCamera'）.src，函数（img）{
var imgUrl=img.toDataURL（格式，JPEG质量）
document.getElementById（'pictureFromCamera'）.setAttribute（“src”，imgUrl）
}, {
方向：6
}//选项
)
}
}

#图片摄像机{
宽度：100%；
高度：自动；
}
.数字包装器{
显示：块；
位置：相对位置；
溢出：隐藏；
}
/*在预览的右下角设置下载按钮*/
#btn下载照片{
位置：绝对位置；
底部：0；
右：0；
右边距：16px；
边界半径：4px；
}
/*在预览的右上方设置“删除”按钮*/
#删除照片{
位置：绝对位置；
排名：0；
右：0；
右边距：16px；
边界半径：4px；
}

下载
删除

我给你写了一个片段。如果您需要使用

minWidth

等选项来控制大小，请将其更新以使其成为一个标准。据我所知，图像只是填充了可用的宽度，因此它最初被缩小到任意宽度。为了保持该宽度，当图像旋转90°时，必须将其用作minHeight和maxHeight。还请注意，当调用

rotateLeftButtonTapped

时，它会为rotate按钮指定一个单击处理程序，因此如果只调用一次此函数，代码将正常工作，但在这种情况下，函数的名称没有意义。向图像容器中添加

最大高度应该可以解决此问题。您的
#pictureFromCamera
设置为始终具有100%宽度。这并不能像您希望的那样工作，它取决于图像尺寸。尝试使用最小/最大css选项。或者您可以尝试使用选项对象加载图像库并设置一些维度。尝试在中使用
contain:true
。