将图像放在div元素中并保持图像比例

Question

HTML:

<div id="presentationViewContainer">
    <img id="presentationView" />
</div>

CSS:

#presentationViewContainer {
  display: none;
  position: absolute;
  width: 530px;
  top: 106px;
  left: 28px;
  box-shadow: 0px 0px 5px 4px rgb(75, 80, 86);
}

#presentationView {
  max-height:100%;
  max-width:100%;
}

图像处于纵向模式时的实际结果 ::图像高度太大..

如果图像处于纵向模式,则预期结果:图像应位于红色方块上以查看整个图像:

如果图像是横向的实际结果:图像应居中:

如果图像处于横向模式,则预期结果:图像应居中:

JSFIDDLE:

对于纵向模式:https://jsfiddle.net/8e1p351u/ 对于横向模式:https://jsfiddle.net/n9b8q82o/

更新:

这是现在的实际结果:

如何设置红色方块中图像的位置？