将图像放在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/

更新：

现在是实际结果：

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

Answer 1

使用css3新规则非常简单：

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

如果您担心旧浏览器，在许多情况下，flexbox对您和翻译方法都没有帮助。如果这对您非常重要，您可以为图像指定尺寸并执行此操作：

.container img{
  width: 400px;
  height: 300px;
  margin: -150px 0 0 -200px;
  position: absolute;
  top:50%;
  left:50%;
}

Answer 2

你可以抛弃你的容器并按照这样做：

编辑： 这应该适用于风景和肖像，并且具有响应性。基本上它适用于任何容器。在这种情况下，容器只是具有100％高度和高度的主体。宽度。不要忘记你的css重置！

html,
body {
  height: 100%;
  width: 100%;
}
* {
  margin: 0;
  padding: 0;
}
#presentationView {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 100%;
  max-height: 100%;
  display: block;
}

<img id="presentationView" src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Tour_Eiffel_3c02660.jpg" />

Answer 3

您想要为容器设置高度。

更新了小提琴：Portrait - Landscape

#presentationViewContainer {
  position: absolute;
  width: 530px;
  top: 0;
  left: 0;
  
  height: 100%;
    border: blue dashed 1px;
}

#presentationView {
  max-height:100%;
  max-width:100%;
    box-shadow: 0px 0px 5px 4px rgb(75, 80, 86);
}
img{
  border : red solid 3px;
}

<div id="presentationViewContainer">
	<img id="presentationView" src="http://upload.wikimedia.org/wikipedia/commons/b/b0/Tour_Eiffel_3c02660.jpg" />
</div>

此外，这里有三个关于图像魔术居中的实验，没有拉伸：

With regular CSS

With object-fit : contain（任何版本的IE都不支持）

With Flexbox