Rssponsive重叠图像与Css/js

Question

我有一个全宽div的图像重叠的div，所以当浏览器得到调整后，更多的图像显示/隐藏，但图像本身不会调整大小。我得到了它的宽度工作，但我怎么能达到相同的效果的高度？

这里是我的测试： https://jsfiddle.net/g8h8umt3/

我得到了宽度使用CSS：

#img-header{ 
    margin-left: 50%; 
    transform: translateX(-50%); 
} 

编辑：

这里是它是如何假定一个形象的工作： Image

t中的图像他的背景应该保持其大小，并且根据屏幕大小，父div应该变得更小/更大。我得到了宽度的行为，但我不知道如何去做图像的高度。

我也尝试添加

#img-header{ 
    margin-top: 50%; 
    margin-left: 50%; 
    transform: translate(-50%,-50%); 
} 

但这似乎并没有工作

Answer 1

如果希望图像保持其大小，并且随着父级大小更改而隐藏在所有角落，请使用absolute定位图像，并使用left: 50%; top: 50%; transform: translate(-50%,-50%)的组合将图像置于父级的中心，并将父级将在图像的各个方面进行缩放。

$(document).ready(function() { 
 
\t 
 
\t $('#img-header-container').height($(window).width()/3); 
 
\t 
 
    $(window).resize(function() { 
 
\t \t onResized(); 
 
\t }); 
 
}); 
 

 
function onResized(){ 
 
\t $('#img-header-container').height($(window).width()/3); 
 
}

#img-header-container{ 
 
    width: 100%; 
 
\t overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#img-header{ 
 
    position: absolute; 
 
\t left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="min-height:50px">Conent Before</div> 
 
<div id="img-header-container"> 
 
    <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/> 
 
</div> 
 
<div style="min-height:50px">Conent After</div>

而对于它的价值，你不必使用jQuery使窗口高度的容器的1/3。您可以使用视口单位（vh）和calc()。

#img-header-container { 
 
    height: calc(100vh/3); 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#img-header { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div style="min-height:50px">Conent Before</div> 
 
<div id="img-header-container"> 
 
    <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header" /> 
 
</div> 
 
<div style="min-height:50px">Conent After</div>

而且FWIW V2.0，你可以与背景图像做到这一点，那么img不会阻止网页加载和它不太标记/ CSS。

#img-header-container { 
 
    height: calc(100vh/3); 
 
    background: url('https://clsimplex.com/images/releases/headers/quality-code.jpg') center center no-repeat; 
 
}

<div style="min-height:50px">Conent Before</div> 
 
<div id="img-header-container"> 
 
</div> 
 
<div style="min-height:50px">Conent After</div>

Answer 2

我不知道如果我理解你想要做 什么我给你什么，我明白

为例

#img-header-container{ 
 
    width: 100%; 
 
} 
 

 
#img-header{ 
 
    max-width:100%; 
 
}

<div style="min-height:50px">Conent Before</div> 
 
<div id="img-header-container"> 
 
    <img src="https://clsimplex.com/images/releases/headers/quality-code.jpg" id="img-header"/> 
 
</div> 
 
<div style="min-height:50px">Conent After</div>