Jquery 将图像放入div元素并保持图像比率

HTML:

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

如果图像处于纵向模式，实际结果：：图像高度太大

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

如果图像处于横向，实际结果：图像应居中：

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

JSFIDDLE:

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

对于纵向模式： 对于横向模式：

更新：

以下是现在的实际结果：

如何设置图像在红场中的位置

---

您可以扔掉集装箱，这样做：

编辑： 这应该适用于横向和纵向，并且是响应性的。基本上它适用于任何容器。在这种情况下，容器只是具有100%高度和宽度的主体。别忘了你的css重置

html，
身体{
身高：100%；
宽度：100%；
}
* {
保证金：0；
填充：0；
}
#呈现视图{
位置：相对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
最大宽度：100%；
最大高度：100%；
显示：块；
}

---

您想要设置容器的高度

最新小提琴：-

#presentationViewContainer{
位置：绝对位置；
宽度：530px；
排名：0；
左：0；
身高：100%；
边框：蓝色虚线1px；
}
#呈现视图{
最大高度：100%；
最大宽度：100%；
盒影：0px 0px 5px 4px rgb（75,80,86）；
}
img{
边框：红色实心3px；
}

---

使用css3新规则，这非常简单：

#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%;
}

如果您担心旧浏览器，flexbox在很多情况下都不会帮助您，也不会使用translate方法。如果这对您非常重要，您可以为图像提供尺寸，并执行以下操作：

.container img{
  width: 100%;
  height: auto;
}
@supports(object-fit: cover){
    .container img{
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }
}

---

问题是什么？或者我只是没有看到一个？或者可能只是使用flex？浏览器支持如何？从代码的角度来看，IE如何P transform对transform的支持是IE9——对于flex，它是IE10，我测试了您的代码。请在帖子中查看我的更新。图像很好，但位置不好（在左上角）。我想把位置定在红场上。。你能帮我吗？你点击了我最后的两个链接了吗？魔术定心实验？编辑：最后三个链接，因为Vandervals让我发现了对象匹配：contains你知道，我如何在img周围添加边框？（在img附近）是的，我知道。但我不能让你太容易。如果你用谷歌搜索，你会在3秒钟内找到它；）哇，我从来都不知道物体适合！很好的回答，值得一次投票：）你知道，我如何在img周围添加边界？（在img附近停留的是哪一个）@wawanopoulos你试过边界还是边界图像？