用css / js响应重叠图像(Rsponsive overlapping image with css/js)

 我有一个全格div的图像，它与div重叠，所以当浏览器被调整大小时，会显示/隐藏更多图像，但图像本身不会调整大小。 我得到了它的宽度工作，但我怎么能达到相同的效果的高度？ 
 
 这是我的测试： https ： //jsfiddle.net/g8h8umt3/ 
 
 我得到了与CSS工作的宽度： 
 
#img-header{
    margin-left: 50%;
    transform: translateX(-50%);
}
 
 编辑： 
 
 这是一个关于它如何工作的图像 ： 图像 
 
 背景中的图像应保持其大小，并且根据屏幕大小，父div应该变得更小/更大。 我得到了宽度的行为，但我不知道如何去做图像的高度。 
 
 我也试过添加 
 
#img-header{
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%,-50%);
}
 
 但这似乎并不奏效 

I have a image in a fullwidth div which is overlapping the div, so when the browser gets resized more of the image is shown/hidden but the image itself does not get resized. i got it working for the width but how can i achieve the same effect for the height?
 
Here is my test: https://jsfiddle.net/g8h8umt3/
 
i got the width working with css:
 
#img-header{
    margin-left: 50%;
    transform: translateX(-50%);
}
 
EDIT:
 
Here is a image on how it suppose to work: Image
 
The image in the background should keep its size and the parent div should get smaller/larger depending on the screen size. I got the behaviour for the width but i dont know how to do it for the height of the image.
 
I also tried adding
 
#img-header{
    margin-top: 50%;
    margin-left: 50%;
    transform: translate(-50%,-50%);
}
 
but this does not seem to work

原文：https://stackoverflow.com/questions/45495266