html - 当宽度不变时，根据窗口高度使图像响应

Question

CodePen 上的示例:http://codepen.io/seadrag0n/pen/oxVJgX

我正在学习响应式设计而不使用像 bootstrap 这样的库，并且在弹出窗口中显示大图像时我遇到了问题，它应该是高度和宽度响应的。我有以下片段:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.outer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  border: 1px solid #333;
  position: relative;
  top: 50%;
}

.inner {
  width: 100%;
  height: auto;
  position: absolute;
}

.inner img {
  max-width: 100%;
  height: auto!important;
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <img src="http://www.cameraegg.org/wp-content/uploads/2015/06/Sony-RX100-IV-Sample-Images-2.jpg" />
  </div>
</div>

使用上面的标记，图像是 width 响应的，但不是 height 响应的，并且在 1920 x 1080 分辨率的屏幕上图像看起来很好，但是当我切换到 1366 x 768 分辨率时，图像溢出而不是调整到屏幕尺寸。我该如何解决这个问题？

我想实现与 this 中相同的样式插件，如果您保持宽度不变并减小浏览器窗口的高度，即使宽度相同，图像也会调整到屏幕尺寸。

Answer 1

demo

只需使用height 100vh

.outer {
  margin-left: auto;
  margin-right: auto;
  max-width: 1200px;
  border: 1px solid #333;
  position: relative;
  top: 50%;
}

.inner {
  width: 100%;
  height: auto;
  position: absolute;
}

.inner img {
  height: 100vh;
  max-width: 100%;
  position: absolute;
}

<div class="outer">
  <div class="inner">
    <img src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" />
  </div>
</div>