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

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

Answer 2

查看CSS媒体查询。

一旦您为要覆盖的屏幕尺寸选择了适当的断点，max-width和max-height CSS属性应该能够解决您的问题。

查看this Stack Overflow post。

Answer 3

<强>更新

我刚刚更新了codepen＆amp;也在这里推出了代码。

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

.container {
    border: 1px solid red;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}

.img-container {
    position: relative;
    overflow: hidden;      
    display: flex;      
}

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

.example {
    border: 1px solid blue;
    height: 20%;
    position: absolute;      
    width: 100%;
    top: 50%;
    transform: translateY(-50%);      
}

这是工作codepen

垂直和水平响应图像

3 个答案: