javascript - 垂直和水平响应图像

Question

我有一个叠加层图像，需要垂直和水平响应才能在桌面和移动设备上工作。

编辑:垂直响应，我的意思是它需要留在窗口内，而不是溢出到屏幕底部以下。

图片顶部有一个元素需要保持在同一位置，并且图片必须保持其纵横比。

我宁愿使用纯 CSS，但可以使用 JS 来实现浏览器兼容性或更简单的解决方案。

http://codepen.io/brooksroche/pen/mEgJmd?editors=1100

<div class="container">
  <div class="img-container">
    <img src="http://placehold.it/300X200">
    <div class="example"></div>
  </div>
</div>

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

.img-container {
  position: relative;
  margin: 0 auto;
  border: 1px solid red;
  width: 300px;
  max-width: 100%;
}

.img-container img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.example {
  position: absolute;
  border: 1px solid blue;
  top: 40%;
  left: 30%;
  width: 38%;
  height: 20%;
}

Answer 1

尝试将宽度和高度设置为自动:

.img-container img {
display: block;
width: auto;
height: auto;
}

或者我设置了宽度或高度，然后自动设置有效的另一个。