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>