試圖保持圖像包含在另一個圖像

Question

我正在使用jQuery更改點擊後圖像的大小。無論點擊後圖像的大小如何，我怎樣才能保持右上角的關閉按鈕。 JSFIDDLE

我的CSS

#full_image { 
width: 0px; 
height: 0px; 
left: 0px; 
position: relative; 
opacity: 1; 
z-index: 9; 
} 

#full_image img { 
background: url("zoom-on.png") no-repeat; 
background-position: 5px 5px; 
left: 0px; 
width: 339px; 
height: 211px; 
position: relative; 
overflow: hidden; 
} 

#full_image .full_close{ 
background: url("zoom-on.png") no-repeat; 
top: 10px;  
cursor: pointer; 
height: 29px; 
opacity: 1; 
position: absolute;  
width: 29px; 
z-index: 999; 
right: 0px; 
} 

我的HTML

<div id="full_image"><img src=""/> 
<span> <a href="#" class="full_close"></a></span> 
</div> 

的事情是我能保持包含#full_image內的圖像，但我需要它含有#full_image IMG

Answer 1

試試這個CSS：

#full_image { 
    position: relative; 
    display:inline-block; 
    *display:inline; zoom:1; /* IE7 fix */ 
    z-index:1; 
} 
#full_image span { 
    background:url("zoom-on.png") no-repeat; 
    top: 10px; 
    right: 0px; 
    width: 32px; 
    height: 32px; 
    display:none; 
    cursor: pointer; 
    position: absolute; 
    z-index:2; 
} 
#full_image:hover span { 
    display:block; 
} 

和HTML

<div id="full_image"> 
    <img src="image.jpg" /> <a href="#" class="full_close" title="Close"><span> </span></a> 
</div> 

http://jsfiddle.net/r9LDp/4/

Answer 2

檢查中這Fiddle。這是你想要的嗎？

我創建了一個DIV與full_imageID並將圖像設置爲background。
然後，我已將close button添加到DIV和position - 將它們都添加到了它們中。
因此close button將始終在image的右上角，儘管大小爲image。

Answer 3

檢查here 我已經editted你full_close類的CSS的解決方案

#full_image { 
    width: 5px; 
    height: 5px; 
    left: 0px; 
    position: relative; 
    opacity: 1; 
    z-index: 9; 
    display: inline; 
} 

#full_image img { 
    left: 10px; 
    width: 250px; 
    height: 211px; 
    position: relative; 
    overflow: hidden; 
} 

#full_image .full_close{ 
    background-color: red; 
    top: -180px;  
    cursor: pointer; 
    height: 29px; 
    width: 10px; 
    opacity: 1; 
    position: absolute;  
    width: 29px; 
    z-index: 999; 
    left: 90%; 
}