CSS響應式覆蓋圖像

我有兩個圖像需要彼此重疊。圖像也必須具有響應性，因此具有百分比的寬度和高度。
CSS響應式覆蓋圖像

<div class="container"> 
    <img src="res/bigger.png/> 
    <img src="res/smaller.png class="icon"/> 
</div> 

.container { 
    width:100%; 
    height:100%; 
    background-color:blue; 
    postion:relative; 
} 
.container img { 
    max-width:100%; 
    max-heihgt: 100%; 
    height: auto; 
    width: auto; 
} 
.icon { 
    position: relative; 
    top: -70%; 
    left: 20%; 
    z-index: 50; 
    width: 10% !important; 
    height: auto !important; 
}

由於兩個圖像不必在相同的比例重新尺寸較小的圖像是在較大的圖像的頂部將相對位置的失去了更大的圖像。當我重新調整頁面大小時，如何保持較小圖像相對於較大圖像的位置？
這個問題的一個例子可以在這裏找到http://jsfiddle.net/5YQFV/

來源

2013-01-09 shanti

怎麼樣，而是採用兩個圖像，你會像這樣

<div class="the-gang"> 
    <img src="res/smaller.png" /> 
</div>

容器代替最大圖像，然後設置容器的位置到position:relative，但較小的圖像來position:absolute這樣

.the-gang{ 
    position:relative; 
    width:100px; 
    height:75px; 
} 

.the-gang img{ 
    position:absolute; 
    top:10px; 
    left:10px; 
}

這樣的位置最小的形象將永遠留在你把它，當t他絕對的位置將是相對於它的容器。可能的缺點是您必須設置父容器的最小高度和寬度，但優點是它將純粹在CSS中完成，不需要使用JavaScript。

來源

2013-01-09 10:22:22 Pankucins

我已經更新了小提琴，你已經解釋過：http://jsfiddle.net/5YQFV/2/這個例子的問題是，該div不調整大小的圖像的大小，因此小圖像仍然在容器div調整大小時移動 – shanti

您是否意味着容器不會調整爲背景圖像的大小？如果是這樣，那麼你必須使用JavaScript來獲取背景的大小，因爲CSS不知道它的大小，並且不能調整容器的大小。 – Pankucins

CSS響應式覆蓋圖像

回答

相關問題