垂直和水平響應圖像

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

嘗試的寬度和高度設置爲auto：

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

或者我已經設置了寬度或高度，然後自動將其他已奏效。

Answer 2

查看CSS媒體查詢。

max-width和max-height一旦你爲你想要覆蓋的屏幕尺寸選擇合適的斷點，CSS屬性應該能夠解決你的問題。

結賬this Stack Overflow post。

Answer 3

更新

我剛剛更新codepen &也推杆代碼在這裏了。

<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