当大于 X 时，在父级内缩放图像，保留透视图

Question

尝试为以下问题获得 CSS 解决方案。

我想在容器中显示各种尺寸的图像。如果图像大于视口高度的 80%，则应按比例缩小以适合容器。

我遇到的问题是缩放到最大高度和最大宽度（以适应横向和纵向图像）。

这里是一个非工作的 JSFiddle 作为起点。 None 的图像应该流出灰色框。 https://jsfiddle.net/0h5zkk0z/2/

<div id="container">
<img src="http://dummyimage.com/200x200/000/fff/?text=small" />
</div>
<div id="container">
<img src="http://dummyimage.com/400x700/000/fff/?text=portrait" />
</div>
<div id="container">
<img src="http://dummyimage.com/600x400/000/fff/?text=landscape" />
</div>

<style>
#container {
  max-height: 80vh;
  background-color: #ccc;
  position: relative;
  margin-bottom: 30px;
}
#container IMG {
  margin: 0 auto;
  display: block;
  width: auto;
  height: 100%;
}
</style>

Answer 1

.container {
  max-height: 80vh;
  background-color: #ccc;
  position: relative;
  margin-bottom: 30px;
}

.container img {
  margin: 0 auto;
  display: block;
  width: auto;
  max-height: inherit; //Inherits from container height
}

顺便说一句：请只使用一次 ID:-)

Fiddle

当大于 X 时，在父级内缩放图像，保留透视图

Scale image within parent, retaining perspective, when larger then X

css

response

scale